块格式化上下文 （Block formatting contexts）

一、BFC 是什么？

9.3 Positioning schemes

CSS 2.1 中，一个盒可能会根据三种定位方案来布局：

常规流 CSS 2.1 中，常规流包括块级盒的块格式化（block formatting），行内级盒的行内格式化和块级与行内级盒的相对定位。

浮动 在浮动模型中，盒先根据常规流来放置，然后从常规流中取出来并尽可能远地向左或向右移动。其它内容可能沿着浮动（盒）的一侧排列（Content may flow along the side of a float）。

绝对定位 在绝对定位模型中，一个盒会从常规流中全部移除（它不会影响后面的兄弟元素）并根据包含块确定位置。

9.4 Normal flow

常规流中的盒属于一个格式化上下文，可能是块或是行内（格式化上下文），但不能两者都是。块级盒参与块格式化上下文。行内级盒参与行内格式化上下文。

根据 CSS 中的定义，可以知道 BFC 是一种块级元素的布局规则。

二、如何产生 BFC ？

9.4.1 Block formatting contexts

浮动，绝对定位的元素，非块盒的块容器（例如 inline-blocks，table-cells 和table-captions ），以及 overflow 不为 visible 的块盒（当该值已被传播到视口时除外）会为其内容建立新的块格式化上下文。

在一个块格式化上下文中，盒在垂直方向一个接一个地放置，从包含块的顶部开始。两个兄弟盒之间的垂直距离由 margin 属性决定。同一个块格式化上下文中的相邻块级盒之间的垂直外边距会合并。

在一个块格式化上下文中，每个盒的左外边界（left outer edge）挨着包含块的左外边界（对于从右向左的格式化，右外边界挨着）。即使存在浮动（尽管一个盒的行框可能会因为浮动而收缩），这也成立。除非该盒建立了一个新的块格式化上下文（这种情况下，该盒自身可能会因为浮动变窄）。

根据 CSS 中关于 BFC 的规范，以下情况会触发 BFC：

• 浮动的元素，即 float: left; float: right;
• 绝对定位的元素，即 position: absolute; position: fixed;
• 非块盒的块容器，即 display: inline-block; display: table-cell; display: table-caption; display: flex; 等
• overflow 不为 visible 的块盒，即 overflow: hidden; overflow: scroll; overflow: auto; 等

三、BFC 的应用

BFC 的应用就是根据 BFC 的规则来解决布局中遇到的问题。

在一个块格式化上下文中，盒在垂直方向一个接一个地放置，从包含块的顶部开始。
两个兄弟盒之间的垂直距离由 margin 属性决定。
同一个块格式化上下文中的相邻块级盒之间的垂直外边距会合并。

container 是一个 BFC ，one 的 margin-bottom 和 two 的 margin-top 重叠，要解决这个问题，只需要给 one 和 two 包装一层容器，让他们不属于同一个 BFC 就行了。

修改前：

修改后：

在一个块格式化上下文中，每个盒的左外边界（left outer edge）挨着包含块的左外边界（对于从右向左的格式化，右外边界挨着）。即使存在浮动（尽管一个盒的行框可能会因为浮动而收缩），这也成立。除非该盒建立了一个新的块格式化上下文（这种情况下，该盒自身可能会因为浮动变窄）。

常用的清除浮动就是应用的这个原理

修改前：

修改后：