块格式化上下文（block formatting context 简称 BFC）

在一个 BFC 里，盒子会在垂直方向一个接一个地放置，盒子垂直方向的距离由上下 margin 决定。

BFC 作用于块级子元素

水平方向宽度计算

在一个 BFC 里，一个块级元素总是占满整行的宽度，其计算公式如下：

full width = margin + border + padding + width => margin + width => margin-left + width + margin-right

margin 和 width 都为默认值（分别为0，auto）

block 1

margin 左右取值，width 为默认值

block 2

margin 左右为 auto，width 取值

block 3

margin 左为 auto，width 取值

block 4

垂直方向间距计算

在一个 BFC 里，盒子垂直方向的距离由上下 margin 决定，在同一个 BFC 中，垂直方向相接的间距会发生合并。如都为正值，则取最大值；如一正一负，则取相加后的值；如都为负，则取绝对值大的那个。

正值合并

block 5 margin-bottom 为 10px

block 6 margin-top、margin-bottom 都为 30px

block 7 被包裹了一层父级元素 block wrap，其 margin-top 为 10px。由于 block 7、block wrap 的 margin-top 直接与 block 6 的 margin-bottom 相接，所以三者会发生合并并取最大值。而其 margin-bottom，由于父级元素设置了一个 padding-bottom，隔开了与 block 8 的 margin-top 相接，所以不会合并 。

block 8

正负合并

block 9 margin-bottom 为 -10px

block 10 margin-top、margin-bottom 为 20px

block 11 margin-top 为 -30px

负值合并

block 12 margin-bottom 为 -10px

block 13 margin-top 为 -5px

不同的 BFC，垂直方向相接的 margin 不合并

block 14 margin-bottom 为 10px

block 13 margin-top 为 10px。父元素新建了一个 BFC，所以 margin 没有合并

匿名块盒

块容器盒要么只包含行内级盒，要么只包含块级盒。但通常文档会同时包含两者。在这种情况下，将创建匿名块盒来包含毗邻的行内级盒。(这也就是后面所说的IFC里面绝不会包含块级元素)

我是直接文本

我是块级元素，但是我的前后都不是

我也是直接文本

BFC 容器高度包括浮动元素

默认没有新建一个BFC，block-wrap 没有包括浮动图片的高度

我是块级元素

新建一个BFC，block-wrap 包括浮动图片的高度

我是块级元素