清除浮动的4种方法

初始HTML代码如下：

<div class="top">顶部</div>
<div class="banner">banner</div>
<div class="main">
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
	</ul>
</div>
<div class="footer">底部</div>

初始CSS代码如下：

* {
	margin: 0;
	padding: 0;
}
ul {
	list-style: none;
}
.top, .banner, .main, .main ul li, .footer {
	border: 1px dashed #444;
	background-color: #666;
	text-align: center;
}
.top {
	height: 100px;
	margin-bottom: 10px;
}
.banner, .main {
	width: 960px;
	margin: 0 auto;
	margin-bottom: 10px;
}
.banner {
	height: 150px;
}
.main ul li {
	width: 230px;
	height: 150px;
	float: left;
	margin-right: 10px;
}
.main ul li:last-child {
	margin-right: 0;
}
.footer {
	height: 150px;
}

不给main盒子添加高度且不清除浮动时，由于其子元素都浮动，而影响到下面其他元素的排版，初始效果图如下：

清除浮动方法如下：

1. 给main添加一个类名clearfix，设置clearfix的before、after伪元素（推荐）

<div class="main clearfix">...</div>

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

2. 给main添加一个类名clearfix，设置clearfix的after伪元素

<div class="main clearfix">...</div>

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

3. main盒子后面添加一个空盒子clear（不推荐）

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

.clear {
	clear: both;
}

4. main盒子添加overflow，触发BFC，检测浮动盒子即子元素的高度

.main {
	overflow: hidden; 
}

效果图如下：