个人笔记——清除浮动的几种方法

构成Block Formatting Context的元素可以清除内部元素的浮动，那么Block Formatting Context是什么呢?(下次补充)

构成Block Formatting Context的方法有下面几种：

float的值不为none。overflow的值不为visible。display的值为table-cell, table-caption, inline-block中的任何一个。position的值不为relative和static。下面罗列出了这些方法的用法和弊端。

1、clearfix(重构版)

给需清除内部元素浮动的元素添加一个clearfix类，类的设置如下：

.clearfix {
 zoom: 1; /*在IE6, 7下zoom: 1会触发hasLayout，从而使元素闭合内部的浮动。*/
 display: table;/*也可以设置成table-cell, table-caption，为了保证兼容可以用table*/
}

2、overflow:hidden

给需清除内部元素浮动的元素设置overflow:hidden;属性

弊端：会把下拉的菜单隐藏掉

 

3、overflow: auto

给需清除内部元素浮动的元素设置overflow:auto;属性

弊端：出滚动条

 

4、float

让需清除内部元素浮动的元素也浮动起来，使其也脱离标准流。

弊端：可能影响兄弟元素的布局，使页面布局混乱

 

5、position：absoluteh/fixed

让需清除内部元素浮动的元素设置成position：absolute；或者position：fixed；，使其也脱离标准流。

弊端：可能影响兄弟元素的布局，使页面布局混乱

 

6、display: inline-block

让需清除内部元素浮动的元素设置成display: inline-block；

弊端：会产生多余空白

 

本笔记参考：http://www.imooc.com/wenda/detail/11604