什么是 Block Formatting Context (BFC)

参考：https://www.w3.org/TR/CSS21/v...
在讲BFC之前，先来了解一下CSS2.1规范里面的一个关于元素的定位规则(positioning schemes),主要有三种：常规文档流，浮动，绝对定位。
1: 常规文档流(Normal flow)：常规文档流包含三种情况：

1: 块级盒元素（block-level boxes）的块级格式(block formatting)
2: 行内盒元素(inline-level boxes)的行内格式(inline formatting)
3: 块级盒元素和行内盒元素的相对定位

2: 浮动（Floats）：

1: 第一步：先按照常规文档流的规则定位
2: 第二步：从文档流里面抽离出来，最大化地靠左或者靠右
3: 浮动的元素对后续的元素定位有影响

3: 绝对定位(Absolute positioning):

1: 绝对定位包括 'position: absolute'和'position: fixed'
2: 绝对定位的元素从文档流里面彻底地抽离出来，对后续的元素定位没有影响
3: 绝对定位的元素最终的位置取决的‘top’,'right', 'bottom', 'left'设置的值。而这些值都是相对其父元素来说的。

在上面的第一点里面我们已经提到了一个概念叫：block formatting。那什么又是Block Formatting Context呢？这里先看看MDN是给出的定义：

A block formatting context is a part of a visual CSS rendering of a
Web page. It is the region in which the layout of block boxes occurs
and in which floats interact with each other.

额，看完之后，我脑袋里面只有一个想法： What is that?
不如先不去追究这个概念，先来看看在哪些情况下，会创造BFC：

1：根元素
2: 浮动元素：float的值不是‘none’的元素
3: 绝对定位元素:（position: absolute 或者 position: fixed）
4: 行内块级元素:(display: inline-block)
5: 表格单元格（table cells）:（display: table-cell,也是 HTML table cells的默认值）
6: 表单标题（table captions）: (display: table-caption, 也是HTML table captions的默认值)
7: 块元素（block element）当overflow为非'visible'的其他值：auto, hidden, initial, overlay, scroll. 当overflow:inherit, 这时候取决于最终继承到的值。
8: display: flow-root的元素
9: column-span: all的元素

看完了上面产生BFC的各种情况，现在再来看看BFC到底有些什么规则：
1: 在一个块元素格式上下文（BFC）,这些盒子（boxs）从父元素（容器元素）的顶端垂直地一个接一个排列
2: 两个相邻元素的垂直间距（margin）会折叠（collapse）
3: 每一个元素的左边界紧贴着容器元素的左边界（当然这是针对从左到右排列的元素，从右到左排列的元素那就是又边界紧贴着容器元素的右边界）。