如何“清除浮动”

清除浮动(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;
}

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