清除浮动的方法

<div class="box box1">
	<p></p>
	<p></p>
	<p></p>
	<p></p>
</div>
<div class="box box2">
	<p></p>
	<p></p>
	<p></p>
	<p></p>
</div>

1. 给父亲设置高度

缺点： 一般不给父亲设置高度，只使用与固定高度；

.box{
	width: 800px;
	height: 100px;		//给父亲设置高度
	border: 10px solid red;
}
div p{
	float: left;
	width: 100px;
	height: 100px;		//儿子高度小于父亲
	margin-right: 10px;
	background: yellowgreen;
}

2. 使用clear清除浮动

clear: 是清除别的元素浮动对自身造成的影响

问题：

1. clear虽然清除了浮动，但是父亲的高度没有撑开；
2. 给父亲设置margin失效；

div{
	width: 800px;
	border: 10px solid red;
	margin-bottom: 20px;	//被子元素覆盖，视觉上失效
}
.box2{
	clear: both; /*  left right both */
}
div p{
	float: left;
	width: 100px;
	height: 100px;
	margin-right: 10px;
	background: yellowgreen;
}

3. 使用外墙法清除浮动

用法：是在父亲和儿子之间设置一个空的div，给其清除浮动；

<div class="box box1">
	<p></p>
	.....
</div>
<div class="cl_h20"></div>
<div class="box box2">
	<p></p>
	......
</div>

	.cl_h20{
			clear: both;
			height: 20px;
		}	

缺：只清除了浮动，没有撑开父亲高度，（很少用）

4. 使用内墙法清除浮动

用法：给每个父亲在浮动的子元素最后设置空div，清除浮动

<div class="box box1">
	<p></p>
	.....
	<div class="cl"></div>
</div>
<div class="box box2">
	<p></p>
	......
	<div class="cl"></div>
</div>

	.cl{
			clear: both;
		}	

优：父亲的高度得以撑开，清除了浮动
缺：增加无用代码，增加了代码的复杂度，下面有偏方；

5. 溢出隐藏（*）

在浮动子元素的父亲设置overflow: hidden，可以撑开父亲；
加载时会去检测父亲里面最高的height作为自己的高度；

div{
	width: 800px;
	border: 10px solid red;
	margin-bottom: 20px;	//被子元素覆盖，视觉上失效
	overflow: hidden; 		//和子元素float搭配使用
}

6. 通过伪类的方式清除浮动（后续补充）