What is the difference between Normal Flow, Flow Layout, Block and Inline Layout?-CodePudding

Are they all synonyms?

Examples of websites that use these terms:

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)

I didn't understand the "uses block layout rules" part. What would be the definition of "block layout"?

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

What exactly is flow layout and block and inline layout?

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)

Here it talks about how it behaves but doesn't say exactly what it is.

Maybe normal flow = flow layout = block-and-inline = block-layout = inline-layout?

CodePudding user response：

Normal flow = flow layout = block-and-inline.

block-layout ≠ inline-layout

CSS2 describes block layout:

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

and inline layout:

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

There's plenty more detail¹ there, but that's the essence of the layouts.

The purpose of "Normal flow" is provided a single term of layout to be contrasted with floated and positioned layout, and the internals of other independent formatting contexts.

¹ Pretty much the entirety of sections 9 through 16 of the CSS 2.2 specification are describing that detail.

² "Vertically" and "Horizontally" here assumes a horizontal writing-mode. CSS 3 introduces a vertical writing-mode where everything's rotated though 90°, so "vertically" and "horizontally" are reversed.