1.问题起源
html：
<div class=“outer”>
<div class="inside"></div>
<div class="inside"></div>
<div class="inside"></div>
</div>
css：
.outer{
border:1px solid black;
}
.inside{
float:left;
100px;
height:100px
}
最外面的div没有设置高度，导致里面的3个div，没有撑开父元素。 在浏览器中运行的结果会是，子元素会显示在父元素的外部。
2. 问题的原因与浮动定位有关。
在CSS规范中，浮动定位不属于正常的页面流（page flow），是独立定位的。所以，只含有浮动元素的父容器，在显示时不考虑子元素的位置，就当它们不存在一样。这就造成了显示出来，父容器好像空容器一样。
3.解决方法的有很多，只介绍一种常用的。在父元素添加伪类:after
.outer:after{
clear:both;
display:block;
content:"0020";
height:0;
}
"content:"0020";"是在父容器的结尾处放一个空白字符，"height: 0;"是让这个这个空白字符不显示出来，"display: block; clear: both;"是确保这个空白字符是非浮动的独立
但是，:after选择符IE 6不支持，也就是说上面的这段代码在IE 6中无效，这怎么办？
我们添加一条IE 6的独有命令"zoom:1;"就行了，这条命令的作用是激活父元素的"hasLayout"属性，让父元素拥有自己的布局。IE 6会读取这条命令，其他浏览器则会直接忽略它。
4.最终代码
.outer:after {
content: " 020";
display: block;
height: 0;
clear: both;
}
.outer{
zoom: 1;
}