清除浮动最常用的四个方法

父元素没有高度，子元素浮动的话，父元素会缩成一条线，此时需要清除浮动

---

一、额外标签法

子元素后面加上一个空元素，并对该元素添加clear:both效果。

<div class="father">
	<div class="son"></div>
	<div class="clear"></div>
</div>

.clear{
	clear:both;
}

---

二、overflow法（BFC）

利用overflow触发BFC机制，闭合父元素。

.father{
	overflow:hidden;
}

.father{
	overflow:auto;
}

在IE6还需要触发hasLayout布局机制，一般设置father的宽高或者添加zoom:1。

---

三、单伪元素法（after）

<div class="father clearfix">
	<div class="son"></div>
	<div class="clear"></div>
</div>

.clearfix::after{
	clear:both;
	content:"";
	display:block;
	height:0;
	visibility:hidden;
}
.clearfix{
 *zoom: 1;

伪元素是行内元素，需要转化为块元素。
*表示只在IE6-7执行。

---

四、双伪元素法（before,after）

<div class="father clearfix">
	<div class="son"></div>
	<div class="clear"></div>
</div>

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

伪元素是行内元素，需要转化为块元素。
*表示只在IE6-7执行。

---