清除浮动的几种方法

方法一: 设置一个伪类(最推荐的方法)

#parent {
	border: 1px solid red;
	zoom: 1;	/*兼容IE*/
}
.child {
	float: left;
	border: 1px solid black;
}
/*伪类写法如下，有些网上教程写的无效*/
#parent:after {
	display: block;
	content: "clear";
	height: 0;
	clear: both;
	overflow: hidden;
	visibility: hidden;
}

方法二: 在浮动元素最后加个br或div之类的空元素，添加下面的类(这样会多一个元素，不推荐)

<div id="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
	<div class="clear"></div>
</div>

#parent{
	border: 1px solid black;
}
.child {
	float: left;
	border: 1px solid red;
}
clear {
	clear: both;
}

方法三: 给父元素设置overflow：hidden(不推荐)

该方法很方便，但如果需求中拥有子元素超出父元素的情景时(下拉框，弹框等)，超出部分将被隐藏。