css清除浮动

原文：http://www.ruanyifeng.com/blog/2009/04/float_clearing.html

方法1：添加空元素

<div>
<div style="float:left;width:45%;"></div>
<div style="float:right;width:45%;"></div>
<div style="clear:both;"></div>
</div>

原理：父容器必须考虑非浮动子元素的位置，而后者肯定出现在浮动元素下方，所以显示出来，父容器就把所有子元素都包括进去了。

优点：这种方法比较简单

缺点：要在页面中增加冗余标签

 

方法2：使用:after伪选择器（方法一的增强版）

.clearfix:after {
content: "\0020";
display: block;
height: 0;
clear: both;
}

原理：CSS语句中有一个:after伪选择符，就可以在父容器的尾部自动创建一个子元素。

优点：去除了页面中增加的冗余标签

缺点：IE6中不支持。

其中的"clearfix"是父容器的class名称，"content:"020";"是在父容器的结尾处放一个空白字符，"height: 0;"是让这个这个空白字符不显示出来，"display: block; clear: both;"是确保这个空白字符是非浮动的独立区块。

PS:清除浮动的方法有很多，但是常用并且比较安全的推荐这两种方法。