块格式化上下文(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 包括浮动图片的高度

我是块级元素