清除浮动的方法及优缺点总结

清除浮动的方法及优缺点总结

1）额外标签法 【不推荐】

（在最后一个浮动标签后，新加一个标签，给其设置clear：both;）

如果我们清除了浮动，父元素自动检测子盒子的最高高度，然后与其同高。
优点：通俗易懂，方便
缺点：添加无意义标签，语义化差

2）父级添加overflow属性 【不推荐】

父元素添加overflow:hidden）
通过触发BFC方式，实现清除浮动
优点：代码简洁
缺点：内容多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素

3）使用after伪元素清除浮动 【推荐使用】

*注：.clearfix为浮动元素父级的class名
.clearfix:after{ //伪元素是行内元素 正常浏览器清除浮动方法
content:" ";
display: block;
height:0;
clear:both;
visibility:hidden;
}
优点：符合闭合浮动思想，结构语义化正确
缺点：ie6-7不支持伪元素 :after，使用zoom:1触发hasLayout.

4）使用before 和after双伪元素清除浮动 【推荐使用】

.clearfix:after, .clearfix:before{
	content: " ";
	display: table;
}
.clearfix:after{
	clear:both;
}
.clearfix{
	*zoom:1;
}
优点：代码更简洁
缺点：用zoom:1 触发hasLayout

haslayout是IE7-浏览器的特有属性。hasLayout是一种只读属性，有两种状态：true或false。当其为true时，代表该元素有自己的布局，否则代表该元素的布局继承于父元素。