一、BFC 是什么？
CSS 2.1 中，一个盒可能会根据三种定位方案来布局：
常规流 CSS 2.1 中，常规流包括块级盒的块格式化（block formatting），行内级盒的行内格式化和块级与行内级盒的相对定位。
浮动 在浮动模型中，盒先根据常规流来放置，然后从常规流中取出来并尽可能远地向左或向右移动。其它内容可能沿着浮动（盒）的一侧排列（Content may flow along the side of a float）。
绝对定位 在绝对定位模型中，一个盒会从常规流中全部移除（它不会影响后面的兄弟元素）并根据包含块确定位置。
常规流中的盒属于一个格式化上下文，可能是块或是行内（格式化上下文），但不能两者都是。块级盒参与块格式化上下文。行内级盒参与行内格式化上下文。
根据 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）挨着包含块的左外边界（对于从右向左的格式化，右外边界挨着）。即使存在浮动（尽管一个盒的行框可能会因为浮动而收缩），这也成立。除非该盒建立了一个新的块格式化上下文（这种情况下，该盒自身可能会因为浮动变窄）。
常用的清除浮动就是应用的这个原理
修改前：
修改后：