清除浮动的几种方法

一、clear:both;

这种方法有一个问题：margin失效。

二、隔墙法

    <div class="box1">
    </div>
    <div class="cl hl"></div> /*墙*/
        <div class="box2">
    </div>

    cl{
        clear: both;
    }
    .hl{
        height: 16px;
    }

• 演化出的“内墙法”

    <div>
        <p></p>
        <p></p> /*两个p都浮动，所以div不会被撑出高*/
        <div class="cl"></div> /*在家里建一堵墙就能让儿子给div撑出高*/
    </div>

注意：一般不使用此方法，会增加页面标签。

三、overflow:hidden;

本意就是清除溢出到盒子外面的文字。但是，它能作为偏方来清除浮动。
注意：一般不使用此方法，因为溢出这个元素所在的区域会被隐藏。

四、使用伪元素

.clearfix:after {
    　　　　content: '';
   　　　　 height: 0;
   　　　　 line-height: 0; /*或 overflow:hidden*/
    　　　　display: block;
    　　　　visibility: hidden;
    　　　　clear: both;
　　　　}
　　　　.clearfix {
   　　　　 zoom: 1;  /*兼容ie6*/
　　　　}

五、双伪元素标签

页面上不存在的元素可以通过css添加上去，每个元素都有自己的伪元素。

　　　　.clearfix:before,.clearfix:after {
   　　　　 content: '';
   　　　　 display: table;
　　　　}
　　　　.clearfix:after {
    　　　　clear: both;
　　　　}
　　　　.clearfix {
  　　　　  zoom: 1;
　　　　}