1. 问题的由来
有这样一种情形：在一个容器（container）中，有两个浮动的子元素,父元素并没有设置高度。
<div>
<div style="float:left;45%;"></div>
<div style="float:right;45%;"></div>
</div>
在浏览器中运行的结果会是，子元素会显示在父元素的外部。
2. 问题的原因与浮动定位有关。
在CSS规范中，浮动定位不属于正常的页面流（page flow），是独立定位的。所以，只含有浮动元素的父容器，在显示时不考虑子元素的位置，就当它们不存在一样。这就造成了显示出来，父容器好像空容器一样。
3.解决方法
经典的解决方法，通过css为父元素添加伪类
代码这样写：
.clearfix:after {
content: " 020";
display: block;
height: 0;
clear: both;
}
"clearfix"是父容器的class名称，"content:"020";"是在父容器的结尾处放一个空白字符，"height: 0;"是让这个这个空白字符不显示出来，"display: block; clear: both;"是确保这个空白字符是非浮动的独立区块。
但是，:after选择符IE 6不支持，也就是说上面的这段代码在IE 6中无效，这怎么办？
我们添加一条IE 6的独有命令"zoom:1;"就行了，这条命令的作用是激活父元素的"hasLayout"属性，让父元素拥有自己的布局。IE 6会读取这条命令，其他浏览器则会直接忽略它。
7.最终代码
.clearfix:after {
content: " 020";
display: block;
height: 0;
clear: both;
}
.clearfix {
zoom: 1;
}