清除浮动的常用方法

先说不清除浮动的效果：



给父元素这只边框都不会把他们包裹起来，俗称高度塌陷。

然后说说几个不常用的清除浮动方法，比如：

<div style="overflow:hidden">
<div style="float:left;"></div>
<div style="float:left;"></div>
</div>

就是给父元素设置overflow属性的那种，具体样式就不写了；

这个原理现在说一下。刚写这篇文章的时候并不知道给父元素设置overflow：hidden为什么可以防止高度塌陷。

要说明白这个问题首先需要知道bfc是个什么鬼。具体参照BFC神奇背后的原理

这里的原理就是：“overflow:hidden;“ 使父元素成为了一个bfc环境，bfc元素计算高度时，浮动元素也参与计算。

还有这种：

<div style="">
<div style="float:left;"></div>
<div style="float:left;"></div>
<div style="clear:both"></div>
</div>

这种的是在浮动元素最后加一个空的div然后给他清楚浮动，这个原理就是让它左右两边都不挨着浮动元素，所以他就钻到父元素的最下边了，但是还是在父元素内，所以就把父元素给撑起来了。不会塌陷。效果如下：



还有：

<div style="float:left;">
<div style="float:left;"></div>
<div style="float:left;"></div>
</div>

给父元素也加浮动，这种方式是极不好的，会影响父元素的定位

还有一种极不好的，是给设置父元素的display属性为table。这个table属性的元素布局的时候坑太多了，所以这种清除浮动的方式是极不推荐的。

最后被大家所广泛采用的一种方式是：

<style>
.box{
width:400px;
border:red solid 1px;
}
.clearfix{
*zoom:1;
}
.clearfix:after{
display:block;
content:"";
clear:both;
}
.one{
width:100px;
height:100px;
background-color:yellow;
margin:5px;
float:left;
}
</style>
<div class="box clearfix">
<div class="one">one</div>
<div class="one">two</div>
<div class="one">three</div>
</div>

用after伪类在box父元素内的最后添加一个子元素，每个dom元素都必须有display和content属性，所以要写上：

.clearfix:after{
display:block;
content:"";
clear:both;
}

注意display属性不可以写inline，因为inline撑不起父元素。

然后，ie6、7不支持伪类：after，所以我们在

.clearfix{
*zoom:1;
}

设置了zoom属性，使用来触发ie67的haslayout属性来支持：after伪类，haslayout是关于ie低版本浏览器排版的一个属性。