bfc

作者：zccst

概念：

BFC，在进行盒模型时，提供了一个环境，在这个环境中按照一定规则进行布局不会影响到其他环境中的布局。

也就是说，如果一个元素符号了成为BFC的条件，该元素内部元素的布局和定位就和外部元素互不影响，是一个隔离了的独立容器。

在CSS3中，BFC叫FLOW ROOT。

 

 

形成BFC条件：

1，float不为none

2，overflow不为visible

3，display的值为table-cell, table-caption , inline-block之一

4，position的值不为 static 或 relative中的任何一个

 

常见作用

1，包含浮动元素

对父元素使用overflow:hidden/auto/scroll, float:left/right, display:inline-block可以闭合浮动。

使用display:table可以隐式触发table-cell/table-caption，来创建bfc

例子，使用overflow:hidden避免了外部div的高度塌陷，否则内部浮动元素脱离文档流，外部div相当于一个空标签，没有高度和宽度，上下边框重叠在一起。

注：IE6/7需要触发hasLayout闭合浮动

2，不被浮动元素覆盖

即float:left和display:inline-block可以在同一行，互相不重叠。

3，阻止父子元素的margin合并

详见另一个文章。简言之：

<div style="margin-top:20px"><div style="margin-top:20px"></div></div>  //会合并，父级元素不是BFC

<div style="margin-top:20px;overflow:auto"><div style="margin-top:20px"></div></div>  //不会合并，父级元素是BFC

注：ie6/7需要触发hasLayout。

 

 

我们知道在IE6、7内有个hasLayout的概念，很多bug正式由hasLayout导致的，当元素的hasLayout属性值为false的时候，元素的尺寸和位置由最近拥有布局的祖先元素控制。当元素的hasLayout属性值为true的时候会达到和BFC类似的效果，元素负责本身及其子元素的尺寸设置和定位。我们可以利用这点儿在IE6、7下完成清浮动，先看看怎么使元素hasLayout为true

• position: absolute 
• float: left|right
• display: inline-block
• width: 除 “auto” 外的任意值
• height: 除 “auto” 外的任意值
• zoom: 除 “normal” 外的任意值
• writing-mode: tb-rl

在IE7中使用overflow: hidden|scroll|auto 也可以使hasLayout为true

 

 

在IE6/7使用hasLayout

.floatfix{//IE6-7

*zoom:1;

}

.floatfix:after{//IE8及以上

content:"";

display:table;

clear:both;

}

结论：两种办法

1，利用clear清除浮动

2，使父容器形成BFC