css - 有多少 CSS 格式化上下文？

Question

我正在阅读 CSS2.1 规范。我知道“ block 格式化上下文”、“内联格式化上下文”、“表格/网格/flex 格式化上下文”。

我想知道，“格式化上下文”有多少种？有完整的 list 吗？

Answer 1

一般来说，“格式化上下文”只是一个区域，其中某种类型的后代框(例如 block 、内联、 flex 元素)以正常流布置(或格式化)。

在CSS2.1中，格式化上下文只有两种: block 式和内联式。在 section 9.4 中适本地描述了这两者。 .不存在表格格式化上下文这样的东西，至少 CSS2.1 没有定义；相反，它只是说 a table box establishes a block formatting context , 但其内容以表格形式列出。

其他类型的格式化上下文在它们各自的 CSS3 模块中定义，因此可能没有详尽的列表。也就是说，一些示例包括:

• Flexbox : flex 容器建立 flex 格式化上下文。
• Grid Layout : 网格容器建立网格格式化上下文。