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浮动问题 。