首页 导航

格式化上下文

默认情况下,盒子按照元素在 HTML 中的先后位置从左至右自上而下一个接着一个排列摆放。如下图:

在图中我们可以看到,有些元素的盒子被渲染为完整的一行,如h1、p、div;而有些元素的盒子则被渲染为水平排列,直到该行被占满然后换行,如span、a、strong。

这是因为不同的盒子使用的是不同的格式化上下文(formatting context)来布局,每个格式化上下文都拥有一套不同的渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。就如使用不同的容器来装水一样,呈现出来的形态也将不一样。

最基本的两个格式化上下文分别为:块格式化上下文(block formatting context 简称 BFC)和行内格式化上下文(inline formatting context 简称 IFC)

BFC

默认根元素(html 元素)会创建一个 BFC,除此以外,下面的任何一个条件都可以创建一个新的 BFC。

BFC 规定的是其块级子元素的排列方式,而不是创建 BFC 的元素本身。如下图:

在一个 BFC 中,其块级盒子元素将会按照如下规则进行渲染:

具体渲染效果可参看 DEMO:块格式化上下文

IFC

当块容器盒(block container box)不包括任何块级盒(block-level boxes)时,就会创建一个行内格式化上下文(IFC)。

IFC 规定的是行内级子元素的排列方式,其渲染规则比较多,这里把几个重要点简单罗列如下:

注:在 IFC 的环境中,是不能存在块级元素的,如果将块级元素插入到 IFC 中,那么此 IFC 将会被破坏掉变成 BFC,而块级元素前的元素或文本和块级元素后的元素或文本将会各自自动产生一个匿名块盒其包围,这在前面匿名块盒的时候已经讨论了。

具体行盒高度及垂直对齐方式渲染效果可参看:

其他格式化上下文

除此之外,还有一些其他格式化上下文,如 table formatting context(table 布局)、flex formatting context(flexbox 布局)、grid formatting context(grid 布局),这些我们将在随后的课程中继续深入。

参考资料