CODEWITHSUNDEEP
htmlcsslayoutfrontendweb-frontend
quark
quark

Reputation: 21

What is the relationship between 'Normal Flow' and 'BFC'?

I read this in MDN's Introduction to formatting contexts: Introduction to formatting contexts

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 <html> element's block is laid out according to normal flow following the rules for block and inline layout. Elements participating in a BFC use the rules outlined by the CSS Box Model, which defines how an element's margins, borders, and padding interact with other blocks in the same context.

So can we think of 'Normal Flow' as the way to layout in BFC, and Normal Flow is the largest BFC created by the root element (HTML) My mental model Is this rough mental model correct?

I consulted the documentation： Introduction to formatting contexts Block and inline layout in normal flow Some concepts from the CSS specification documentation such as:'visual formatting model','block container box','block level box','block box'.

Upvotes: 2

Views: 123

Answers (1)

Alohci
Alohci

Reputation: 82986

It used to be a decent approximation. Less so nowadays that we have Flex formatting contexts and Grid formatting contexts.

To grasp normal flow, a better place to start is The glossary in the CSS Level 3 Display specification, which says:

  • out-of-flow

  • in-flow

    A box is out-of-flow if it is extracted from its expected position and interaction with surrounding content and laid out using a different paradigm outside the normal flow of content in its parent formatting context. This occurs if the box is floated (via float) or absolutely positioned (via position). A box is in-flow if it is not out-of-flow.

Note: Some formatting contexts inhibit floating, so that an element with float: left is not necessarily out-of-flow.

So normal flow is all content that's not floated or absolute positioned (including for this purpose, fixed positioned). You probably shouldn't tie this too closely to any particular formatting context.

Upvotes: 1

Related Questions