浮动&清除浮动的四种方法（伪类清除法）

浮动

浮动：即脱离正常的文档流，优先级提高。
例如三个div盒子设置宽高都为100px;表现为：竖着排一列。那么如果设置浮动以后，就会显示到一排，也就是横着显示一排；如果只给第一个设置浮动，那么第二个盒子就会认为我上面没有盒子了，并且有位置，那么第二个盒子就会跑到第一个盒子的位置。并且被第一个盒子覆盖，因为第一个盒子设置了浮动，他的文档流是比较高的。
如下图：
没有任何浮动的三个盒子： 正常排列

浮动以后的盒子： 横着排列成一排

给第一个盒子设置浮动的情况：
此时为了方便看出盒子一盖住盒子2，我给盒子2的宽设置成了150px，其他的盒子还是100px.

清除浮动

为什么要清除浮动：

1. 没有给父盒子设置高度。（为了方便添加子元素且不会脱离父盒子）
2. 子盒子设置了浮动
3. 影响到了下面的布局

清除浮动的方式：

1. 给浮动的元素最后面添加一个空的块级元素，然后给他的样式设置clear:both; （优点：简单；缺点：给结构中实际添加了新的元素，结构化较差）。
2. 父级元素设置overflow:hidden; （优点：最简单。缺点：溢出父级元素的部分也就看不到了）
3. 父级设置：after伪元素；

给父级设置after伪元素的情况：    // 优点：语义化ok，缺点兼容性不好，IE6，IE7都不能用；
.clearfix:after{
	content:"";
	display:block;
	height:0;
	clear:both;
	visbility:hidden;
}
.clearfix{
	*zoom:1;
}

4. 给父级元素前后都设置伪元素，前面设置：before{} 后面设置：after{}

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

总结：浮动是为了让结构更好的布局，达到我们想要的样子。清除浮动是为了不影响下面的布局，建议最好用第四种。