清除浮动多种方法

前言：当使用浮动时，父盒子没有规定高度，子元素浮动后父元素会造成塌陷。

• 第一种方法：增加额外标签

.clear { /*在最后增加div增加clear类样式*/
	clear: both;
}

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

第二种：overflow清除浮动

.father {
	overflow: hidden;  /*给父类增加overflow属性*/
}

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

第三种：after清除浮动

.clearfix:after{
	content: " ";
	height: 0;
	clear: both;
	display: block;
	visibillty: hidden;
}
.clearfix{
	*zoom: 1;/*兼容IE6 IE7*/
}

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

第四种：双伪类清除浮动

.clearfix:after, .clearfix:before{
	content:" ";
	display:table
}
.clearfix:after{
	clear:both
}
.clearfix{
	*zoom: 1;/*兼容IE6 IE7*/
}

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