解决float浮动带来的父元素高度没有的问题---清除浮动

float的特性 :

1:使元素block块级化;

2:破坏性造成的紧密排列特性。

基于以上的特性,使得我们通常把浮动用来布局,带来的问题是,容易出问题,重用性不行,ie6-的版本下很多问题,因为它是要求固定的宽度,宽度计算错误就会带来整个布局的错乱。

float属性出现的初衷是为了让文字环绕图片实现图文混排的效果和应用于流体布局,所以float浮动带来的父元素高度没有的问题并不是我们说的是一个  BUG,这本身就是float的特性。

以下是解决float浮动带来的父元素高度没有的问题

测试为IE5+

1:在父元素的里面浮动元素的后面添加一个样式为clear:both;的元素;缺点是添加了无用的标签元素;

.clear{ clear:both; height:0px; font-size: 1px; line-height: 0px;overflow:hidden; }/* 清除浮动*/

2:给父元素添加伪类并给样式(.fix应用在包含浮动子元素的父元素上)

.fix:after{content:"";display: block;height: 0;overflow: hidden;clear: both;}

.fix{*zoom:1;}  //兼容ie7以下

或者

.fix:after{content:"";display: table;clear: both;}

.fix{*zoom:1;}

3:直接给父元素添加一句样式:

父元素{overflow: hidden;}

时间: 2024-10-25 00:33:01

解决float浮动带来的父元素高度没有的问题---清除浮动的相关文章

子元素设置浮动样式,父元素高度为0

子元素如果设置了浮动样式,那么它就会脱离文档流,从而导致父元素高度变成0,当然不能说这是一个Bug,float的出现的初衷就是为了实现文字环绕图片来实现图文混排和流式布局,所以只能说这种情况只能是由于浮动样式的特性决定的. 测试用例: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

父元素高度塌陷的解决办法

很多时候子元素浮动的,会造成父元素塌陷 解决方法 1.添加一个空元素,并设置成清除浮动,即: <div style="clear:both;"></div> 优点:通俗易懂,易于掌握 缺点:添加了无意义标签,不易于后期维护,违背了结构和表现的标准 2.给父元素添加 overflow:auto; 3.给父元素也浮动 缺点:影响整体页面布局,若父元素也有父元素呢? 4.使用after伪元素 给父元素添加一个类,即看不见的清除浮动的元素 .clearfix:after

子元素浮动时无法撑开父元素,父元素高度为0的解决方法

当子元素浮动时无法撑开父元素,父元素高度为0.这时可以通过在浮动的子元素后清除浮动来使父元素获得正确的高度. <div> <div style="float:left;height:200px;">child</div> <div style="clear:both;"></div> </div>

子元素浮动后、父元素的高度自适应

一.普通情况下,即没有任何浮动样式等的情况下 设置父元素的高度为aotu 或100% 或者不设置,那么父元素会根据子元素的高度而自动调整自身高度. 栗子 <!--html代码--> <div id="wrap"> <img src="./1.png" alt="logo"/> <div id="content"></div> </div> CSS样式 #w

css 子元素设置float,父元素高度塌陷

以div元素为例.div元素的高度会通过内容自动撑开.也就是说,内容有多少,高度就有多高.但是当内部元素设置了float属性之后,会是父元素高度塌陷 <div class="container"> <p>Hello World!Hello World!</p> <div class="clearfix"></div> </div> 清除浮动的方法 父元素底部添加空div,然后在添加属性clear

css float父元素高度塌陷

css float父元素高度塌陷 float 使父元素高度塌陷不是BUG,反而是标准. float 原本是为了解决文字环绕才出现的. 当然有的时候要解决高度塌陷的问题 以下几个方法可以解决float 父元素高度消失/塌陷的问题 .clearfix:after{content:'';display:block;height:0;overflow:hidden;clear:both;} .clearfix {*zoom:1} 更好的方法是 .clearfix:after{content:'';dis

CSS父元素高度随子元素高度变化而变化

<html> <body> <head> <style> #menu{width:1000px;overfloat:hidden;} /* width:1000px;overfloat:hidden; 父元素高度随子元素变化而变化 */ #menu ul{list-style-type:none;} #menu ul li{float:left;margin-right:10px;} /* float:left; 浮动横布局,让父元素高度变0px */ &l

垂直居中-父元素高度确定的单行文本

我们在实际工作中也会遇到需要设置垂直居中的场景,比如好多报纸的文章标题在左右一侧时,常常会设置为垂直居中,为了用户体验性好. 这里我们又得分两种情况:父元素高度确定的单行文本,以及父元素高度确定的多行文本. 本节我们先来看第一种父元素高度确定的单行文本, 怎么设置它为垂直居中呢? 父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的.(height: 该元素的高度,line-height: 顾名思义,行高(行间距),指在文本中,行

父元素 高度固定,如何使其中的文字垂直居中?

方法一: 设置父元素高度,设置子元素行高垂直居中 <style> *{padding: 0;margin:0;font-size: 12px;} div{float: left;width: 200px;height:200px;margin: 10px;border:1px solid blue; line-height: 200px;} span{display: inline-block;vertical-align: middle;line-height: 22px;} </st