如何“清除浮动”

清除浮动(Enclosing float)： clear：left | right | both | none；

闭合浮动(Clearing float)：使浮动元素闭合

目的是解决父盒子高度为0的问题。

方法一：额外标签法  

<div class="wrap" id="float1">
    <div class="main left">.main{float:left;}</div>
    <div class="side left">.side{float:right;}</div>
    <div style="clear:both;">我是额外的标签，用来闭合浮动哒</div>
 </div>

方法二：使用 br标签和其自身的 html属性

<div class="wrap" id="float2">
    <div class="main left">.main{float:left;}</div>
    <div class="side left">.side{float:right;}</div>
    <br clear="all">
</div>

方法三：父元素设置overflow: hidden

<div class="wrap" id="float3" style="overflow:hidden; *zoom:1;">
    <div class="main left">.main{float:left;}</div>
    <div class="side left">.side{float:right;}</div>
</div>

方法四：父元素设置display:table

<div class="wrap" id="float6" style="display:table;">
    <div class="main left">.main{float:left;}</div>
    <div class="side left">.side{float:right;}</div>
</div>

方法五：伪元素(我们采纳)

.clearfix:after {
    content:””;
    visibility:hidden; 
    display:block;
    height:0;
    clear:both;
}

.clearfix{
    Zoom:1;
}

方法六： 双伪元素(我们采纳)

.clearfix:before,.clearfix:after{
    display: table;
    content: "";
}

.clearfix:after {
    clear: both; /* For IE 6/7 (trigger hasLayout) */
}

.clearfix {
    zoom: 1;
}

 参考地址：那些年我们一起清除过的浮动