css3 清除浮动的方法推荐使用

css3 清除浮动的方法推荐使用

<div class="content">
	<div class='incont'></div>
</div>


<style>

.content {
    width: 120px;
    margin: 30px;
    padding: 25px;
    background-color: #81b0db;
}

.incont {
	float: right;
    width: 50px;
    height: 200px;
    background: aquamarine;
}

// 使用after伪元素清除浮动（推荐使用）
.content {
    width: 120px;
    margin: 30px;
    padding: 25px;
    background-color: #81b0db;
    *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}
.content:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
	content: "";
	display: block;
	height: 0;
	clear:both;
	visibility: hidden;
}
//缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.

// 使用before和after双伪元素清除浮动
.content:after,.content:before{
	content: "";
	display: table;
}
.content:after{
	clear: both;
}
</style>