关于浮动与清除浮动 (附清除浮动的八种方式)
2013-11-04 22:04
288 查看
在css2里,浮动(float)这个属性是个经典又诡异的一个属性,历来对它的争议就不断。
从语义上讲:
float这个属性顾名思义,既然叫浮动,咱们不妨把它与船体在水中的浮动联系起来。即可以这样假设,document为一个水箱,document的文档流就是水箱里的一层水,这层水的厚度无限接近于零,而所有在文档流中的元素都是在这层水中进行排列的,他们都有各自的占位空间,所以不允许有任何的交叠。
而,float浮动,就恰好使原本在文档流这层水中的元素浮于水的表面(即脱离的文档流),说法不一定准确,因为浮动是否是真正的脱离的文档流还有待考究。一旦脱离的文档流后,该元素的占位空间自然也就没有了,但是这里会有一个诡异的地方,所谓的没有占位空间,那么就应该是元素可以自由的交叠。比如像position:absolute的那种。但是对于浮动的元素而言,会稍微有些区别。
浮动的元素,高度会塌陷,这可以理解为占位空间消失造成的,同时高度塌陷也是我们布局中需要清除浮动的最重要的原因之一。但是浮动的元素宽度却处在一个“半塌陷”的状态,为什么说是“半塌陷”呢?请看下面图例:
这是在没有浮动的情况下,上面代码表现。
如果灰色的区域左浮动的话,会是下面的表现:
且慢,如果说宽度的占位还在的话,那么我们不妨对<p>标签设置个margin-left或者padding-left看看如下:
其实运行结果和没有设置padding值一样的。除非padding-left或者margin-left的值大于浮动块宽度(200px)时,我们再看看:如下:
这下可以看出来了,这就是我说“半塌陷”的原因,说是没塌陷吧,那么<p>元素就应该距浮动灰块250px才对,说是塌陷了吧,那么<p>在没有padding-left和margin-left值的时候都应该和浮动块重叠才对。这是float的诡异处之一。
按本人的理解,其实可以这样解释这个现象,这里要引入一个自创的词:“占位空间层级”。是的,引入占位空间层级这个概念之后,针对float这个元素,我们不妨可以这样假定:没有浮动的元素(即在文档流中的)的占位空间层级为0,有浮动的元素(指float:left或right;不包括none)的占位空间层级为1。这样就可以解释刚才我们的<p>的padding和margin值都是在层级为0的占位空间中解析的,而所有的浮动元素由于都在同一个层级的占位空间中,所以浮动元素之间的margin和padding值的解析是和我们正常理解是一致的。至于为什么<p>不和浮动块重叠,那是因为占位空间层级的分界线和文档流基线不是同一个!以下为一个简易的示意图:
清除浮动:
说了这么多浮动的东西,其实我们平时接触最多的问题,还是清除浮动的问题。当初css的发明者之所以会创造clear这个属性,就是因为float太过诡异,与文档流的层级标准都不统一,导致很难包容float所导致的负面影响,所以只能再造一个clear属性,强制清除float带来的后遗症。
说到这里,我很同意一为同仁说的,我们平时说的“清除浮动”准确的说应该是“清除浮动造成的影响”,真正的清除浮动应该是float:none;
说到清除浮动造成的影响,又不得不说一下Dom元素的“包裹性”,因为在我们的实际编码中,用clear来清除浮动已经很少见了。我记得很早前,那时候清除浮动就是在需要清除浮动的元素下面加个空元素,然后样式设置为clear:left或者right或both,但在如今越来越讲究web标准以及代码结构和语义化的时代,用空标签这种既破坏结构有没语义的方法已经显得很傻很天真了。因为经过人们不懈的实践,发现用包裹性来清除浮动造成的影响是更好的一种方式。
其他的先不多说,先看看除了空标签清除浮动外的其他几种方式吧。
?
上面几种方式都有清除浮动影响的作用,前四种是和最后一种在ie678和其他标准浏览器下都有效地方法,zoom因为用到了ie的haslayout,所以只在ie6/7的内核下才有效。
随便举一例,如下:
运行的结果如下:
可见确实是清除了浮动造成的影响。同样的可以试试其他的几种方式。
清除浮动原理-包裹性:
说到包裹性,在这里面的鼻祖应该算是diaplay:inline-block;其他的像overflow,position:absolute,float这几个产生包裹性的原因,本质应该都是因为他们使Dom元素具有了类似inline-block的性质,所以,凡是设置了像display:inline-block或者overflow:hidden/scroll/auto或者position:absolute或者float:left/right这几个属性时,他们具有的包裹性都可以清除他们子元素浮动造成的影响。
-haslayout
这是ie私有的一个东西,不过随着ie8像标准浏览器靠近,它对haslayout的解析也弱化了很多。我们来看看用overflow,zoom,和after伪类这几个清除浮动的方式。
通过测试可以看到,display:inline-block,position:absolute,float:left/right 都把包裹性演绎的很好,但是overflow对包裹性的演绎没那么到位,所以导致ie6下必须强制获取Dom元素的haslayout才能生效。
在ie下,只要我们对一个非inline级别的元素设置width或者height都可以触发他的haslayout,而且,在windows的ie下有个“auto-clearing”的特性:只要给容器一个尺寸,它能使容器自 动扩展以便适应它所包含的内容,即便给它的尺寸非常小,所以1%的height在任何情况都是扩展高度适应它的内容。这就是为什么在第一种方法中加了个ie6的hack是height:1%;原因。
同理,最后一个通过after伪类+content的方式最后要加个height:1%;也是这个原因。因为:after+content 只有在ie8和标准浏览器中支持。
那么zoom,这个就不用多说了,这个是触发haslayout最典型的一种方式...
我根据自己的经验总结8种清除浮动的方法(测试已通过 ie chrome firefox opera,后面三种方法只做了解就可以了):
1,父级div定义 height
<style type="text/css">
.div1{background:#000080;border:1px solid red;/*解决代码*/height:200px;}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>
原理:父级div手动定义height,就解决了父级div无法自动获取到高度的问题。
优点:简单,代码少,容易掌握
缺点:只适合高度固定的布局,要给出精确的高度,如果高度和父级div不一样时,会产生问题
建议:不推荐使用,只建议高度固定的布局时使用
评分:★★☆☆☆
2,结尾处加空div标签 clear:both
<style type="text/css">
.div1{background:#000080;border:1px solid red}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
/*清除浮动代码*/
.clearfloat{clear:both}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
<div class="clearfloat"></div>
</div>
<div class="div2">
div2
</div>
原理:添加一个空div,利用css提高的clear:both清除浮动,让父级div能自动获取到高度
优点:简单,代码少,浏览器支持好,不容易出现怪问题
缺点:不少初学者不理解原理;如果页面浮动布局多,就要增加很多空div,让人感觉很不爽
建议:不推荐使用,但此方法是以前主要使用的一种清除浮动方法
评分:★★★☆☆
3,父级div定义 伪类:after 和 zoom
<style type="text/css">
.div1{background:#000080;border:1px solid red;}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
/*清除浮动代码*/
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{zoom:1}
</style>
<div class="div1 clearfloat">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>
原理:IE8以上和非IE浏览器才支持:after,原理和方法2有点类似,zoom(IE转有属性)可解决ie6,ie7浮动问题
优点:浏览器支持好,不容易出现怪问题(目前:大型网站都有使用,如:腾迅,网易,新浪等等)
缺点:代码多,不少初学者不理解原理,要两句代码结合使用,才能让主流浏览器都支持。
建议:推荐使用,建议定义公共类,以减少CSS代码。
评分:★★★★☆
4,父级div定义 overflow:hidden
<style type="text/css">
.div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:hidden}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>
原理:必须定义width或zoom:1,同时不能定义height,使用overflow:hidden时,浏览器会自动检查浮动区域的高度
优点:简单,代码少,浏览器支持好
缺点:不能和position配合使用,因为超出的尺寸的会被隐藏。
建议:只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。
评分:★★★☆☆
5,父级div定义 overflow:auto
<style type="text/css">
.div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:auto}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>
原理:必须定义width或zoom:1,同时不能定义height,使用overflow:auto时,浏览器会自动检查浮动区域的高度
优点:简单,代码少,浏览器支持好
缺点:内部宽高超过父级div时,会出现滚动条。
建议:不推荐使用,如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。
评分:★★☆☆☆
6,父级div 也一起浮动
<style type="text/css">
.div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;margin-bottom:10px;float:left}
.div2{background:#800080;border:1px solid red;height:100px;width:98%;/*解决代码*/clear:both}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>
原理:所有代码一起浮动,就变成了一个整体
优点:没有优点
缺点:会产生新的浮动问题。
建议:不推荐使用,只作了解。
评分:★☆☆☆☆
7,父级div定义 display:table
<style type="text/css">
.div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;display:table;margin-bottom:10px;}
.div2{background:#800080;border:1px solid red;height:100px;width:98%;}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>
原理:将div属性变成表格
优点:没有优点
缺点:会产生新的未知问题。
建议:不推荐使用,只作了解。
评分:★☆☆☆☆
8,结尾处加 br标签 clear:both
<style type="text/css">
.div1{background:#000080;border:1px solid red;margin-bottom:10px;zoom:1}
.div2{background:#800080;border:1px solid red;height:100px}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
.clearfloat{clear:both}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
<br class="clearfloat" />
</div>
<div class="div2">
div2
</div>
原理:父级div定义zoom:1来解决IE浮动问题,结尾处加 br标签 clear:both
建议:不推荐使用,只作了解。
评分:★☆☆☆☆
从语义上讲:
float这个属性顾名思义,既然叫浮动,咱们不妨把它与船体在水中的浮动联系起来。即可以这样假设,document为一个水箱,document的文档流就是水箱里的一层水,这层水的厚度无限接近于零,而所有在文档流中的元素都是在这层水中进行排列的,他们都有各自的占位空间,所以不允许有任何的交叠。
而,float浮动,就恰好使原本在文档流这层水中的元素浮于水的表面(即脱离的文档流),说法不一定准确,因为浮动是否是真正的脱离的文档流还有待考究。一旦脱离的文档流后,该元素的占位空间自然也就没有了,但是这里会有一个诡异的地方,所谓的没有占位空间,那么就应该是元素可以自由的交叠。比如像position:absolute的那种。但是对于浮动的元素而言,会稍微有些区别。
浮动的元素,高度会塌陷,这可以理解为占位空间消失造成的,同时高度塌陷也是我们布局中需要清除浮动的最重要的原因之一。但是浮动的元素宽度却处在一个“半塌陷”的状态,为什么说是“半塌陷”呢?请看下面图例:
这是在没有浮动的情况下,上面代码表现。
如果灰色的区域左浮动的话,会是下面的表现:
且慢,如果说宽度的占位还在的话,那么我们不妨对<p>标签设置个margin-left或者padding-left看看如下:
其实运行结果和没有设置padding值一样的。除非padding-left或者margin-left的值大于浮动块宽度(200px)时,我们再看看:如下:
这下可以看出来了,这就是我说“半塌陷”的原因,说是没塌陷吧,那么<p>元素就应该距浮动灰块250px才对,说是塌陷了吧,那么<p>在没有padding-left和margin-left值的时候都应该和浮动块重叠才对。这是float的诡异处之一。
按本人的理解,其实可以这样解释这个现象,这里要引入一个自创的词:“占位空间层级”。是的,引入占位空间层级这个概念之后,针对float这个元素,我们不妨可以这样假定:没有浮动的元素(即在文档流中的)的占位空间层级为0,有浮动的元素(指float:left或right;不包括none)的占位空间层级为1。这样就可以解释刚才我们的<p>的padding和margin值都是在层级为0的占位空间中解析的,而所有的浮动元素由于都在同一个层级的占位空间中,所以浮动元素之间的margin和padding值的解析是和我们正常理解是一致的。至于为什么<p>不和浮动块重叠,那是因为占位空间层级的分界线和文档流基线不是同一个!以下为一个简易的示意图:
清除浮动:
说了这么多浮动的东西,其实我们平时接触最多的问题,还是清除浮动的问题。当初css的发明者之所以会创造clear这个属性,就是因为float太过诡异,与文档流的层级标准都不统一,导致很难包容float所导致的负面影响,所以只能再造一个clear属性,强制清除float带来的后遗症。
说到这里,我很同意一为同仁说的,我们平时说的“清除浮动”准确的说应该是“清除浮动造成的影响”,真正的清除浮动应该是float:none;
说到清除浮动造成的影响,又不得不说一下Dom元素的“包裹性”,因为在我们的实际编码中,用clear来清除浮动已经很少见了。我记得很早前,那时候清除浮动就是在需要清除浮动的元素下面加个空元素,然后样式设置为clear:left或者right或both,但在如今越来越讲究web标准以及代码结构和语义化的时代,用空标签这种既破坏结构有没语义的方法已经显得很傻很天真了。因为经过人们不懈的实践,发现用包裹性来清除浮动造成的影响是更好的一种方式。
其他的先不多说,先看看除了空标签清除浮动外的其他几种方式吧。
?
随便举一例,如下:
<div class="overflow-clear" style="padding:10px;border:2px solid #999"> <div style="float:left;width:200px;height:200px;background:#ccc;"></div> <p style="margin:0;padding-left:250px">我是文案</p> </div>
运行的结果如下:
可见确实是清除了浮动造成的影响。同样的可以试试其他的几种方式。
清除浮动原理-包裹性:
说到包裹性,在这里面的鼻祖应该算是diaplay:inline-block;其他的像overflow,position:absolute,float这几个产生包裹性的原因,本质应该都是因为他们使Dom元素具有了类似inline-block的性质,所以,凡是设置了像display:inline-block或者overflow:hidden/scroll/auto或者position:absolute或者float:left/right这几个属性时,他们具有的包裹性都可以清除他们子元素浮动造成的影响。
-haslayout
这是ie私有的一个东西,不过随着ie8像标准浏览器靠近,它对haslayout的解析也弱化了很多。我们来看看用overflow,zoom,和after伪类这几个清除浮动的方式。
通过测试可以看到,display:inline-block,position:absolute,float:left/right 都把包裹性演绎的很好,但是overflow对包裹性的演绎没那么到位,所以导致ie6下必须强制获取Dom元素的haslayout才能生效。
在ie下,只要我们对一个非inline级别的元素设置width或者height都可以触发他的haslayout,而且,在windows的ie下有个“auto-clearing”的特性:只要给容器一个尺寸,它能使容器自 动扩展以便适应它所包含的内容,即便给它的尺寸非常小,所以1%的height在任何情况都是扩展高度适应它的内容。这就是为什么在第一种方法中加了个ie6的hack是height:1%;原因。
同理,最后一个通过after伪类+content的方式最后要加个height:1%;也是这个原因。因为:after+content 只有在ie8和标准浏览器中支持。
那么zoom,这个就不用多说了,这个是触发haslayout最典型的一种方式...
我根据自己的经验总结8种清除浮动的方法(测试已通过 ie chrome firefox opera,后面三种方法只做了解就可以了):
1,父级div定义 height
<style type="text/css">
.div1{background:#000080;border:1px solid red;/*解决代码*/height:200px;}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>
原理:父级div手动定义height,就解决了父级div无法自动获取到高度的问题。
优点:简单,代码少,容易掌握
缺点:只适合高度固定的布局,要给出精确的高度,如果高度和父级div不一样时,会产生问题
建议:不推荐使用,只建议高度固定的布局时使用
评分:★★☆☆☆
2,结尾处加空div标签 clear:both
<style type="text/css">
.div1{background:#000080;border:1px solid red}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
/*清除浮动代码*/
.clearfloat{clear:both}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
<div class="clearfloat"></div>
</div>
<div class="div2">
div2
</div>
原理:添加一个空div,利用css提高的clear:both清除浮动,让父级div能自动获取到高度
优点:简单,代码少,浏览器支持好,不容易出现怪问题
缺点:不少初学者不理解原理;如果页面浮动布局多,就要增加很多空div,让人感觉很不爽
建议:不推荐使用,但此方法是以前主要使用的一种清除浮动方法
评分:★★★☆☆
3,父级div定义 伪类:after 和 zoom
<style type="text/css">
.div1{background:#000080;border:1px solid red;}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
/*清除浮动代码*/
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{zoom:1}
</style>
<div class="div1 clearfloat">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>
原理:IE8以上和非IE浏览器才支持:after,原理和方法2有点类似,zoom(IE转有属性)可解决ie6,ie7浮动问题
优点:浏览器支持好,不容易出现怪问题(目前:大型网站都有使用,如:腾迅,网易,新浪等等)
缺点:代码多,不少初学者不理解原理,要两句代码结合使用,才能让主流浏览器都支持。
建议:推荐使用,建议定义公共类,以减少CSS代码。
评分:★★★★☆
4,父级div定义 overflow:hidden
<style type="text/css">
.div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:hidden}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>
原理:必须定义width或zoom:1,同时不能定义height,使用overflow:hidden时,浏览器会自动检查浮动区域的高度
优点:简单,代码少,浏览器支持好
缺点:不能和position配合使用,因为超出的尺寸的会被隐藏。
建议:只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。
评分:★★★☆☆
5,父级div定义 overflow:auto
<style type="text/css">
.div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:auto}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>
原理:必须定义width或zoom:1,同时不能定义height,使用overflow:auto时,浏览器会自动检查浮动区域的高度
优点:简单,代码少,浏览器支持好
缺点:内部宽高超过父级div时,会出现滚动条。
建议:不推荐使用,如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。
评分:★★☆☆☆
6,父级div 也一起浮动
<style type="text/css">
.div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;margin-bottom:10px;float:left}
.div2{background:#800080;border:1px solid red;height:100px;width:98%;/*解决代码*/clear:both}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>
原理:所有代码一起浮动,就变成了一个整体
优点:没有优点
缺点:会产生新的浮动问题。
建议:不推荐使用,只作了解。
评分:★☆☆☆☆
7,父级div定义 display:table
<style type="text/css">
.div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;display:table;margin-bottom:10px;}
.div2{background:#800080;border:1px solid red;height:100px;width:98%;}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>
原理:将div属性变成表格
优点:没有优点
缺点:会产生新的未知问题。
建议:不推荐使用,只作了解。
评分:★☆☆☆☆
8,结尾处加 br标签 clear:both
<style type="text/css">
.div1{background:#000080;border:1px solid red;margin-bottom:10px;zoom:1}
.div2{background:#800080;border:1px solid red;height:100px}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
.clearfloat{clear:both}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
<br class="clearfloat" />
</div>
<div class="div2">
div2
</div>
原理:父级div定义zoom:1来解决IE浮动问题,结尾处加 br标签 clear:both
建议:不推荐使用,只作了解。
评分:★☆☆☆☆
相关文章推荐
- 关于CSS浮动float属性的了解及清除浮动的方式
- css清除浮动的八种方式你知道多少呢?
- 清除浮动的三种方式
- 【css】清除浮动的几种方式
- css考核点整理(一)-浮动的理解和清除浮动的几种方式
- 清除浮动的几种方式
- 清除浮动的两种方式
- CSS之关于clearfix--清除浮动
- css清除浮动的三种方式
- 清除浮动的方式
- 清除浮动的八种武器
- 清除浮动的方式
- 前端之float的几种清除浮动方式
- 关于网页不兼容乱板的清除浮动
- 关于清除浮动的一些简单理解。
- 关于浮动与清除浮动
- 详解 清除浮动 的多种方式(clearfix)
- 清除浮动的几种方式总结
- 关于浮动清除的一些小感悟,4种方法清除浮动
- CSS之关于clearfix--清除浮动