清除浮动的八种武器

1、给浮动元素的父级元素提供高度，问题：高度并不总是固定的

2、给浮动元素的父级元素添加浮动， 问题：如果层级很多，要加很多浮动，很麻烦

3、给浮动元素的父级元素添加overflow属性，问题：在IE6下有兼容性问题

　　解决办法：通过_zoom:1  来触发IE6下的haslayout来解决

4、给浮动元素的父级元素添加display:inline-block  ，问题： 高级浏览器的元素居中无效

5、给浮动元素的下方添加<div style="clear:both;"></div>； 曾经的流行方案 

　　问题：行为、结构、样式三者没有分离(个人认为问题不大可以采用)

6、给浮动元素的下方添加<br clear="all"></div>；    曾经的流行方案

　　问题：行为、结构、样式三者没有分离(个人认为问题不大可以采用)

7、给浮动元素的父级元素添加after伪类(目前主流方式)

　　给浮动元素的父级添加clear：

.clear{*zoom:1;}
.clear:after{
      clear:both;
      display:block;
      content:"";
}

8、给浮动元素的父级添加定位：position:absolute/fixed

注意：在IE6、7下，如果浮动元素的父级元素有宽度/高度，则不用清浮动。原因是出发了浏览器的haslayout

haslayout  根据元素的内容，或者父级的大小，重新计算元素的高度。常见的触发条件有：

* display: inline-block

* height: (任何值除了auto)

* float: (left 或 right)

* position: absolute

* width: (任何值除了auto)

* writing-mode: tb-rl

* zoom: (除 normal 外任意值)

更多关于haslayout的资料请自行搜索