BFC(Block Formatting contexts): 块级格式上下文

BFC(Block Formatting contexts): 块级格式上下文

顾名思义，BFC是将块级盒子里的内容单独给及格式，而使其布局环境独立，不受外界因素影响。

 

关于BFC的运用：

1.包含浮动元素——自动计算盒子高度

<div style="background: #aaa;border:1px solid #f00;">
        <div style="float:left;width:100px;height:100px;background: #aaf;">我是浮动元素，我的父元素没有BFC</div>
</div>

效果1： 

若改为：

<div style="background: #aaa;border:1px solid #f00;overflow:hidden;">
        <div style="float:left;width:100px;height:100px;background: #aaf;">我是浮动元素，我的父元素有BFC</div>
</div>

效果2：

示例理解：

效果1中，当子元素浮动后，子元素会按照浮动定位方案来进行定位，即：它首先根据常规流向来布局，再将它从流中取出并尽可能地向左或向右偏移，直到它的外边接触到包含块的边或另一个浮动块的边。由于该父元素中除了浮动的这个子元素外，没有其他元素，可以当作一个空标签，所以是没有高度的！

效果2中，给父元素加overflow:hidden可以触发其BFC环境，使得该盒子有能力包含浮动元素！所以高度就被浮动元素撑开了！

2.防止内部元素被外界影响

<div style="float:left;width:100px;height:100px;background: #aaf;">我是浮动元素</div>
<div style="width:150px;height:150px;background: #faf;">我是兄弟元素，没有BFC，我里面的内容被外界影响了。。。</div>

效果1：

若改为：

<div style="float:left;width:100px;height:100px;background: #aaf;">我是浮动元素</div>
<div style="width:150px;height:150px;background: #faf;overflow: hidden;">我是兄弟元素，有BFC，我里面的内容谁也不能影响！</div>

效果2：

示例理解：

效果1中，原因如上讨论，仍是由于浮动元素的浮动定位方案引起的。（类似Word中的文本环绕效果......）

效果2中，由于兄弟元素创建了BFC，所有里面的元素不再被旁边的浮动兄弟元素影响了。

触发BFC：

• float的值不为none；
• overflow的值不为visible；
• display的值为table-cell / table-caption / inline-block之一；
• position的值为absolute；

关于hasLayout：

上文的展示例子，网上好多地方说对于IE6、IE7是没有效果的，需要触发他们的hasLayout属性！

hasLayout是IE的一个特有属性，类似于上文提到的BFC。一般我们可以通过zoom：1来触发它！

即：

<div style="float:left;width:100px;height:100px;background: #aaf;">我是浮动元素</div>
<div style="width:150px;height:150px;background: #faf;zoom:1;">我是兄弟元素，有BFC，我里面的内容谁也不能影响！</div>

我通过IETester测试后发现：对于高度塌陷问题，IE7+是可以用overflow:hidden来解决的，而IE6只能用zoom:1来解决，IE7也可用zoom来解决！
目前IE8+版本测试zoom：1已经不能解决这个问题了，所以不管怎样，这样写应该是不错的：

<div style="float:left;width:100px;height:100px;background: #aaf;">我是浮动元素</div>
<div style="width:150px;height:150px;background: #faf;overflow:hidden;zoom:1;">我是兄弟元素，有BFC，我里面的内容谁也不能影响！</div>

这样可以解决IE的问题了。