CSS清除浮动(转)

“90%的CSS布局的兼容问题都是浮动布局引起的”，这是我无意中听到某位前端人员的抱怨。

某位新手朋友经常问起我浮动布局的时候该如何清除浮动，我回答过N次，但这位新手朋友好像始终记不住，总是会在这里出问题，包括我自己也时常会在这个问题上纠结。上面提到的90%的这个概率可能并不准确，但也反映出了前端人员在这个问题上或多或少的要纠结一番，新手会时常犯难，老手也不一定就不犯傻。

我总结了一下以往几种清除浮动的方法，发觉方法还是挺多的，那么有没有一种最优的方法可以实现一劳永逸呢？且看下面的几种方法先。

空标签法

在浮动元素后加一个空标签，空标签上定义一个清除浮动的类：

view source

print?

1	<style type="text/css">

2	.clear{ clear:both; height:0;overflow:hidden;}

3	.float_left{ float:left; }

4	.float_right{ float:left; }

5

</style>

6	<div class="float_left">左浮动元素</div>

7	<div class="float_right">右浮动元素</div>

空标签法简单有效，对浏览器的兼容性也很不错，空标签也不一定限于div，也可以是其他的标签p、span、br，值得注意的是在标准浏览器下这个空标签必须是块级元素，比如在使用span的时候就得将它转换成块级元素(display:block)，在IE6/7下内联元素也可以。空标签法由于使用起来简单，受到广大新手朋友的青睐，我也时常为了省事，用这种办法。空标签法的缺点就是要多加一个额外的标签，这样HTML代码看起来就不够优雅，如果浮动元素较多，那么空标签也会很多。

overflow

子级元素有浮动，可以给父级元素添加一个overflow:hidden或overflow:auto的CSS属性来清除浮动。

view source

print?

01	<style type="text/css">

02	.list{list-style:none;300px;}

03	.list li{overflow:hidden;}

04	.list a{ float:left; }

05	.list span{ float:right; }

06

</style>

07	<ul class="list">

08	<li><a href="#">链接</a><span>测试</span></li>

09	<li><a href="#">链接</a><span>测试</span></li>

10	<li><a href="#">链接</a><span>测试</span></li>

11

</ul>

该方法可以兼容标准浏览器以及IE7+，对IE6无效。这个方法我平时用得比较多，但是也有个弊端，众所周知，使用了overflow:hidden或overflow:auto属性的CSS元素如果内部有元素要定位到外面来的话就很杯具了。

IE6/7的hasLayout

微软的IE6/7的渲染引擎都有hasLayout属性，很多兼容问题都是由此引起的，某些CSS属性触发了hasLayout也同样可以达到清除浮动的效果。结合上面提到的overflow，那么就可以实现兼容标准浏览器和IE6的清除浮动的效果。触发IE6/7的hasLayout的方法并可以用来清除浮动的方法有：

• 1. 设置一个显式的高度或宽度(不能为auto)
• 2. zoom:1
• 3. display: inline-block (hack形式)
• 4. float:left/right (hack形式)

用上面无序列表的为例来清除IE6/7的浮动的话，上面列出的触发hasLayout的方法1、方法2、方法3都会有一个4px的下间距BUG，用*margin-bottom:-4px修复即可。

float

子元素有浮动，给父元素也添加一个浮动(float:left)，在标准浏览器下和IE6/7/8下都有效，但是这个父级元素浮动了又得清除父级元素的浮动，所以该方法的应用场景很受限制，不推荐使用。

:after

:after是一个伪类元素，经常与content结合使用，用来给元素的后面添加内容，该方法用来清除浮动可以兼容标准浏览器和IE8，IE6/IE7无效。

view source

print?

01	<style type="text/css">

02

.box{

03	zoom:1; /*兼容IE6/7的清除浮动*/

04

}

05	/*兼容标准浏览器*/

06	.box:after{

07	content:''; /*具体的值与清除浮动无关，尽可能的节省字符*/

08	clear:both;

09	overflow:hidden;

10	height:0; /*0高度使其不占用布局空间*/

11	display:block; /*设置成块级元素*/

12

}

13	.float_left{ float:left;}

14	.float_right{ float:left;}

15

</style>

16	<div class="box">

17	<div class="float_left">左</div>

18	<div class="float_right">右</div>

19

</div>

我个人理解该方法就是和空标签的原理一样，都是在后面添加一个清除浮动的元素，而该方法用的是CSS来生成“空标签”，不知道这样理解是否有误，如果哪位看客有更好的说法，望告知。

上面提到的方法都是各有优缺点，并没有一种“最优”的解决方法，可能看到这里发现有点被忽悠的感觉，只能说，清除浮动的这几种方法都要看实际的应用场合，因为HTML的结构是多变的。如果你也有清除浮动的好方法，欢迎提出，共同探讨。