为什么要清除浮动以及方法

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;

   width: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: "\0020";
display: block;
height: 0;
clear: both;
}
.outer{
zoom: 1;
}