css - Normal Flow、Flow Layout、Block 和 Inline Layout 有什么区别？

Question

都是同义词吗？

使用这些术语的网站示例:

The outermost element in a document that uses block layout rules establishes the first, or initial block formatting context. This means that every element inside the element's block is laid out according to normal flow following the rules for block and inline layout. (source: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts#block_formatting_contexts)

我不明白“使用 block 布局规则”部分。 “ block 布局”的定义是什么？

The element lays out its contents using flow layout (block-and-inline layout). (source: https://www.w3.org/TR/css-display-3/#flow-layout)

到底什么是流式布局、 block 式和内联式布局？

Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. Block-level boxes participate in a block formatting context. Inline-level boxes participate in an inline formatting context. (source: https://www.w3.org/TR/CSS2/visuren.html#normal-flow)

这里它讨论了它的行为方式，但没有确切说明它是什么。

也许正常流 = 流式布局 = block-and-inline = block-layout = inline-layout？

Answer 1

正常流 = 流布局 = block 和内联。

block 布局≠内联布局

CSS2 描述 block layout :

In a block formatting context, boxes are laid out one after the other, vertically², beginning at the top of a containing block.

和inline layout :

In an inline formatting context, boxes are laid out horizontally², one after the other, beginning at the top of a containing block.

那里有更多细节¹，但这是布局的本质。

“正常流”的目的是提供一个单独的布局术语，以与 float 和定位布局以及其他独立格式化上下文的内部结构进行对比。

---

¹ 几乎整个 CSS 2.2 规范的第 9 节到第 16 节都在描述这个细节。

² 这里的“垂直”和“水平”假定为水平书写模式。 CSS 3 引入了垂直书写模式，其中所有内容都旋转了 90°，因此“垂直”和“水平”颠倒了。