锋利的BFC

在初学前端的时候，我们会经常碰到各种各样的布局问题，尤其当使用浮动的时候，然而学习了BFC之后，其中的一些怪异现象，也因此成为理所当然，会有一种拨开云雾的快感。

下面简单介绍下BFC，究竟什么是BFC，它到底有什么作用和特点？

链接：http://www.w3.org/TR/CSS21/visuren.html#block-formatting是w3c关于BFC的描述。

一、什么是BFC

BFC(Block Formatting Context)，即块格式化上下文，它是CSS2.1里的一个概念，我们可以简单的把它理解成一个环境，它规定了元素内容如何布局和定位，以及元素间的相互影响和作用。触发了BFC的元素会按照如下方式对其子元素进行排列：

1、子元素会一个接一个的放置。垂直方向上子元素的起点是包含块的顶部，在BFC中相邻的块级元素在垂直方向上，会发生margin折叠现象。

2、每一个子元素的左外边与包含块的左边相接触（对于从右到左的格式化，右外边接触右边），除非这个元素也触发了BFC，如自身也是一个浮动元素。

二、如何触发BFC

1、float值为left|right

2、display值为inline-block|table-cell|table-caption

3、overflow值不为visible（除非该值已经传到viewport）

4、position值为absolute|fixed

三、BFC有什么作用

BFC的主要用途是清除元素浮动和实现多栏布局

1、包含浮动元素

触发了BFC的元素中，子浮动元素也会参与高度的计算，从而避免发生高度“塌陷”，实现了清除浮动的功能。

<div id="container" style="background:blue;width:300px;overflow:hidden">
    <div id="div1" style="background:green;height:200px">in flow</div>
    <div id="div2" style="float:left;background:red">flow:left</div>
</div>

上面代码中，container属性overflow值为hidden，触发了BFC，将div2也包含进来。效果图如下：

如果去掉overflow:hidden，即overflow为默认值visible，则显示如下：

2、不被浮动元素覆盖

与浮动元素相邻的，触发了BFC的元素，都不能与浮动元素相互覆盖，因此我们可以利用此特性实现多栏布局

<div id="container" style="background:blue;width:300px">
    <div id="div2" style="float:left;background:red;filter:alpha(opacity=50);opacity:0.5;">flow:left</div>
    <div id="div1" style="background:green;height:200px;overflow:hidden">in flow</div>
</div>

上面代码div1触发了BFC，效果图如下：

如果去掉div1中的overflow:hidden，则div2会覆盖div1，显示如下：

注意：当BFC宽度大于容器剩余宽度时，浏览器可能会发生兼容性问题，主要有两种情况：1、BFC显示在浮动元素下一行；2、BFC显示在浮动同一行，并且溢出容器。

3、阻止父子元素margin折叠

触发了BFC的元素不会与它的子元素发生外边距折叠

<div id="div1" style="width:200px; height:200px;background:red;overflow:hidden;">
    <div id="div2" style="width:100px; height:100px;background:green;margin:50px;"></div>
</div>

以上代码显示如下：

如果去掉div1中的overflow:hidden，则根据 CSS 2.1 8.3.1 Collapsing margins 第一条，两个相邻(兄弟或者父子)的普通流中的块框在垂直位置的空白边（只要他们之间没有阻挡（例如边框，非空内容，padding等））会发生折叠现象，显示发生变化如下：

四、补充

IE中的haslayout和标准的BFC之间的区别和联系。

区别：

1、在IE8之前，还没有 Block Formatting Context和Inline Formatting Context的概念，而是通过hasLayout来实现相似的目的。

2、在IE中可以通过设置width、height、min-width、min-height、max-width、max-height、zoom（IE6）和writting-mode来触发hasLayout，而这些属性值的设置不能触发BFC。

3、在IE中，一些元素默认就有hasLayout，如input、button、select、textarea，但是这些元素会触发Inline Formatting Context。

相同点：

1、两者都规定了如何对内容进行定位、大小计算，以及和其他元素的相互作用。

2、浮动元素、绝对定位元素、inline-block元素、除visible以外的overflow、table-cell和table-caption既可以触发BFC又可以触发hasLayout。

兼容：

为了兼容IE8-，那么同时触发BFC和hasLayout，那么都不触发。

1、对于触发hasLayout的元素，如input，通过设置CSS属性来触发BFC。

2、对于触发BFC，但没有触发hasLayout的元素，通过设置zoom:1来触发hasLayout。

外边距折叠的问题：

发生外边距折叠的条件：两个元素在垂直方向上有相邻的外边距时。
1、当兄弟元素时，元素间的距离折叠；
2、当父子元素时，子元素的外边距折叠到父元素上。
发生外边距折叠时的计算法则：
1、两个元素的外边距都是正值时，取较大者；
2、两个元素的外边距一正一负时，取两者之和。