css 清除浮动

清除浮动主要说三种方法。

第一种：clear:both

<style>
.clear{
clear:both;
}
.f-left{
float:left;
}
</style>

<div class="outer">
<div class="div1 f-left">1</div>
<div class="div2 f-left">2</div>
<div class="div3 f-left">3</div>
<div class="clear"></div>
</div>

对于第一种方法：

　　优点：简单、代码少、浏览器支持好、不容易出现怪问题

　　缺点：要增加很多空的div

第二种：父级元素添加overflow:hidden

<style>
.over-flow{
overflow:hidden;
}
</style>

<div class="outer over-flow"> //这里添加了一个class
<div class="div1 f-left">1</div>
<div class="div2 f-left">2</div>
<div class="div3 f-left">3</div>
</div>

第三种：after伪类

<style>
.clearfix:after {
content: '.';
display: block;
visibility: hidden;
height: 0;
line-height: 0;
font-size: 0;
clear: both;
}
.clearfix {
zoom: 1; /*主要兼容IE*/
}
</style>

<div class="div1 clearfix">
<div class="left">Left</div>
<div class="right">Right</div>
</div>

对于第三种：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE专有属性)可解决ie6,ie7浮动问题 。