CSS清除浮动的方法以及优缺点

一.背景

先来了解下为什么要清除浮动?

#box{ border:1px solid red; /* overflow: hidden; */ } #left{ float: left; width: 500px; height: 300px; background: green; } #right{ float: left; width: 500px; height: 300px; background: yellow; } <div id="box"> <div id="left"></div> <div id="right"></div> </div>

浮动元素脱离文档流,就无法撑起父元素,会造成父元素的高度塌陷

 二.清除浮动

1.空标签clear:both（不推荐）

clear:both作用:清除两边的浮动,拥有clear:both属性的元素放在浮动元素之后,会起到清除浮动的作用

思路:利用clear:both清除浮动的原理,在最后一个浮动元素之后,添加一个空的div标签,并给其设置clear:both,清除浮动之后,父元素会被里面的子元素撑开,与其同高

#box{ border:1px solid red; /* overflow: hidden; */ } #left{ float: left; width: 500px; height: 300px; background: green; } #right{ float: left; width: 500px; height: 300px; background: yellow; } #space{ clear: both; } <div id="box"> <div id="left"></div> <div id="right"></div> <div id="space"></div> </div>

1.优点

简洁方便,通俗易懂

2.缺点

添加了一个无意义的标签,语义化比较差

2.overflow:hidden(不推荐)

思路:通过触发BFC,清除浮动

#box{ border:1px solid red; overflow: hidden; } #left{ float: left; width: 500px; height: 300px; background: green; } #right{ float: left; width: 500px; height: 300px; background: yellow; } <div id="box"> <div id="left"></div> <div id="right"></div> </div>

1.优点

代码简洁

2.缺点

内容增多的时候,容易造成不会自动换行导致内容被隐藏掉,无法要显示溢出的元素

3.after伪元素清除浮动(推荐使用)

:after伪元素作用:可以在元素的内容之后插入新内容

.clearfix:after { content: ''; clear: both; visibility: hidden; height: 0; display: block; } .clearfix { *zoom: 1; }

步骤:

(1) 添加一个伪元素,内容为一个点.

(2) 使用clear:both清除浮动

(3) 隐藏这个伪元素,但是还要占位,并且设置高度为0

(4) 转为块级元素

(5) 设置*zoom: 1; IE6清除浮动的方式, * 号只有IE6~IE7执行,其他浏览器不执行

1.优点

符合闭合浮动思想,结构语义化正确

2.缺点

IE6~7不支持伪元素 :after,使用zoom:1触发hasLayout

4.before和after双伪元素清除浮动(推荐使用)

.clearfix:after,.clearfix:before { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; }

1.优点

代码更简洁

2.缺点

用zoom:1触发hasLayout.