清除浮动

1. 为什么要清除浮动

因为父级盒子很多情况下是不方便给高度的，但是子盒子浮动就不占有位置，浮动的盒子就不会撑开父级盒子，最后父级盒子高度就为0，因此就会影响下面的标准流盒子。

2. 清除浮动的本质

清除浮动主要是为了解决父级元素因为子级浮动引起内部高度为0的问题。清除浮动之后，父级会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面标准流的盒子了。

3. 清除浮动的方法

1） 额外标签法

	是W3C推荐的做法，通过在浮动元素末尾添加一个空的标签。例如：<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:berfore,
.clearfix:after {
	content: "";
	display: table;
}
.clearfix:after {
	clear:both;
}

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

• 优点：代码更简洁
• 缺点：由于IE6、7不支持after，使用zoom：1触发hasLayout
• 代表网站：小米、腾讯等