什么是BFC

• 对css有了解的朋友肯定都知道盒式模型这个概念，对一个元素设置css，首先需要知道这个元素是block还是inline类型。而BFC就是用来格式化块级盒子，同样管理inline类型的盒子还有IFC，以及其他的FC。那首先我们就来看看FC的概念。
• Formatting Context：指页面中一个渲染区域，并且拥有一套渲染规则，他决定了其子元素如何定位，以及与其他元素的相互关系和作用。
• BFC：块级格式化上下文，它是指一个独立的块级渲染区域，只有Block-level Box参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。
  

  BFC的生成

• 既然上文提到BFC是一块渲染区域，那这块渲染区域到底在哪，它又是有多大，这些由生成BFC的元素决定，CSS2.1中规定满足下列CSS声明之一的元素便会生成BFC。
  • float的值不为none；
  • overflow的值不为visible；
  • display的值为inline-block、table-cell、table-caption；
  • position的值为absolute或fixed；
    看到有人把display：table也认为可以生成BFC，其实这里的主要原因在于Table会默认生成一个匿名的table-cell，正是这个匿名的table-cell生成了BFC。

BFC的约束规则

浏览器对于BFC这块区域的约束规则如下：

• 生成BFC元素的子元素会一个接一个的放置。垂直方向上他们的起点是一个包含块的顶部，俩个相邻子元素之间垂直距离取决于元素margin特性。在BFC中相邻的块级元素外边距会折叠。
• 生成BFC元素的子元素中，每一个子元素的外边距和包含块的左边界相接触，（对于从右到左的格式化，右外边距和右边界相接触），除非这个子元素也创建了一个新的BFC（如它自身也是一个浮动元素）。

有朋友对它做了分解，我们直接拿来：

1. 内部的BOX会在垂直方向上一个接一个的放置；
2. 垂直方向上的距离有margin决定。（完整的说法是：属于同一个BFC的俩个相邻的BOX的margin会发生重叠，与方向无关。）
3. 每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此。（这说明BFC中的子元素不会超出它的包含块，而position为absolute的元素可以超出它的包含块边界）；
4. BFC的区域不会与float的元素区域重叠；
5. 计算BFC的高度时，浮动子元素也参与计算；
6. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然；

看到以上的几条约束，让我想起了学习CSS时的几条规则：

• Block元素会扩展到与父元素同宽，所以block元素会垂直排列；
• 垂直方向上的俩个相邻DIV的margin会重叠，而水平方向不会（此规则并不完全正确）；
• 浮动元素会尽量往左上方（或右下方）；
• 为父元素设置overflow：hidden或浮动父元素，则会包含浮动元素；
• ……

BFC在布局中的应用

上面说了那么多，那么BFC究竟有什么用，毕竟再好的东西也要为我所用才行。

防止margin重叠：

• 同一个BFC中俩个相邻的box才会发生重叠与方向无关，不过由于上文提到的第一条限制，我们甚少看到水平方向的margin重叠。这在IE这中是个特例，IE可以设置write-mode。
• 要阻止margin重叠，只要将俩个元素别放在一个BFC中即可（可以用上文提到的方式让相邻元素其中一个生成BFC）。阻止俩个相邻元素的重叠看起来没有意义，主要用于嵌套元素。

浮动相关问题；

• 使得父元素包含子元素，常见的方式是为父元素设置overflow：hidden或者浮动父元素。根本原因在于创建BFC的元素，子浮动元素也会参与其高度计算，即不会产生高度塌陷问题。

多栏布局的一种方式

• 上文提到的一条规则：与浮动元素相邻的已生成BFC的元素不能与浮动元素互相覆盖。利用该特性可以作为多栏布局的一种实现方式。
• 这种布局的特点在于左右俩栏的宽度固定，中间栏可以根据浏览器宽度自适应。
  

  多栏布局
• IE中也有与BFC类似概念的haslayout。

总结

• 在我第一次接触BFC时经常有一个疑问，BFC的结构是什么样的，像DOM一样的树状结构，还是一个BFC集合。其实我们不需要关心BFC的具体结构，这要看浏览器的具体实现采用什么样的数据结构。对于BFC我们只需要知道使用一定的CSS声明可以生成BFC，浏览器对生成的BFC有一系列的渲染规则，利用这些渲染规则我们可以达到一定的布局效果，为了达到特定的布局效果我们让元素生成BFC。
• 对于CSS新手来说不建议涉猎BFC，还是应该去看看相应的CSS布局规则，像《CSS设计指南》、《CSS权威指南》这俩本都很不错，达到一定积累再来看BFC，说不定会有一种豁然开朗的感觉。BFC中几乎涉及到CSS布局的所有重要属性，这也是BFC的难点和我们需要掌握BFC的意义所在。

作者：wmsj100
链接：http://www.jianshu.com/p/76484dff1cb5
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。