BFC：Block Formatting Context（块级格式上下文）

块格式化上下文（block formatting context） 是页面 CSS 视觉渲染(visual CSS rendering)这个过程中的一个概念。它是决定块盒子的布局及浮动元素相互影响的一个因素。

块格式化上下文包括了创建该上下文的元素的所有子元素，但不包括创建了新的块格式化上下文的子元素。

创建了BFC的元素就是一个独立的盒子，只有block-level box可以参与BFC，它规定了内部的Block-level Box如何布局，并且与这个独立盒子里的布局不受外部影响，当然它也不会影响到外面的元素。

BFC的定义

w3c规范中对BFC的定义：

浮动元素和绝对定位元素，非块级盒子的块级容器（例如inline-block，table-cells，table-captions），以及overflow的值不为”visible”的元素，都会为他们的内容创建新的BFC（块级格式上下文）
在BFC中，盒子从包含块的顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin值所决定的，两个相邻的块级盒子的垂直外边距会发生叠加。
在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘（border-left）（对于从右到左的格式来说，则触碰到右边缘），即使存在浮动也是如此，除非这个盒子创建一个新的块级格式上下文。

总结即：

会创建一个块格式上下文的情况：

1. 根元素或其它包含它的元素
2. 浮动 (元素的 float 不为 none)
3. 绝对定位元素 (元素的 position 为 absolute 或 fixed)
4. 行内块 inline-blocks (元素的 display: inline-block)
5. 表格单元格 (元素的 display: table-cell，HTML表格单元格默认属性)
6. 表格标题 (元素的 display: table-caption, HTML表格标题默认属性)
7. overflow 的值不为 visible的元素
8. 弹性盒子 flex boxes (元素的 display: flex 或 inline-flex)

BFC的特性：

1. BFC内部的Box在垂直方向上，从顶部一个接一个的放置
2. Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生叠加
3. BFC中，对于从左往右的格式化，每个元素的左外边距与容器的左边界相接触，反之亦然，即使浮动也是如此
4. BFC的区域不会与float box叠加
5. BFC就是页面上一个隔离的独立容器，容器中的子元素不会影响到外面的元素，反之亦然
6. 计算BFC的高度时，浮动元素也参与计算

BFC的运用

阻止外边距折叠

同一个BFC中垂直堆放的两个兄弟盒子之间的margin会叠加，为了防止叠加，可以将兄弟元素放在不同的BFC中，通过创建一个新的BFC可以防止外边距的叠加。

使用BFC来清除浮动

由于浮动元素会脱离页面的常规流，导致容器元素的高度不能被撑开，通过添加overflow: hidden，在容器中创建一个新的BFC，那么这个容器将包含浮动的子元素，它的高度也将扩展到可以包含它的子元素。

使用BFC防止文字环绕

由于BFC容器内的元素从左往右排列时，左外边距与容器的左边界相接触，导致一个浮动元素的周围的文字环绕着它，此时通过创建一个新的BFC解决了文字环绕在浮动元素周围的问题。

多列布局中使用BFC

与浮动元素相邻的已生成BFC的元素不能与浮动元素相互覆盖，利用这个特性可以作为多栏布局的一种实现方式。

参阅：
MDN-CSS开发者指南