HTML、CSS小技巧二——CSS清除浮动

为什么要清除浮动？

因为父级盒子很多情况下，不方便给高度，但是子盒子浮动就不占有位置，最后父级盒子高度为0，这样的话，后面标准留的盒子就会跑到浮动的元素下面去，影响布局。

清除浮动的方法

1. 额外标签法(隔墙法)

在浮动元素末尾添加一个空的标签例如<div style=”clear:both”></div>
优点：通俗易懂，书写方便
缺点：添加许多无意义的标签，结构化较差

2. 父级添加overflow属性

给父级添加： overflow为 hidden| auto| scroll 都可以实现.
优点：代码简洁；
缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉；

3. 使用after伪元素

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

.clearfix {
	*zoom: 1;  /* IE6、7 专有 */
	}   

优点：符合闭合浮动思想 结构语义化正确;
缺点：由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

4. 使用双伪元素

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

优点：相较于3，代码更简洁
缺点：由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

推荐使用方法三、方法四清除浮动