清除浮动的方法

1．给父元素加height

2．给父元素加浮动、绝对定位、固定定位

3．给父级元素加display:inline-block

4．给浮动元素下加<div class=”clear” ></div>

.clear{clear:both;height:0;overflow:hidden}

5．给浮动元素下加<br clear=”all”/>

这个不符合W3C的标准，样式，结构，行为分离。

6．给浮动元素的父级元素加

.clear{zoom:1;}触发IE7中的haslayout属性

.clear:after{content:””;display:block;clear:both}

在IE7以下，不支持after伪类，只支持a元素的四个伪类

haslayout:

IE7的兼容版本及以下的版本的渲染引擎的组成部分，haslayout在IE8的标准模式下已经废弃.

haslayout根据元素内容的大小或父级元素的大小来重新计算元素的宽高

 

以下属性和值将给定一个元素布局：

position:absolute  float:left/right display:inline-block 

width: height:  zoom:（除normal外）

7．给浮动元素的父级元素加overflow:hidden/auto不要用scroll，因为会出现滚动条

（1）若父级元素有height，并且小于内容的height，则会隐藏或加滚动条

（2）若父级元素没有height，则会被撑开，所以清除浮动的时候，父级元素不加height。

问题：overflow在IE6下不能够包住浮动元素（即没有将元素提升层级的功能），因此结合zooom;1使用。