HTML & CSS Interview Question #79

What is CSS normal flow?

CSS Layout, Display, Positioning, Flexbox & Grid Mid-Level Intermediate

Quick Interview Answer

Normal flow is the default layout process used when elements have not been taken into special positioning or floating schemes. Block-level content generally flows in the block direction, while inline content flows within line boxes.

Detailed Explanation

Normal flow is the default layout process used when elements have not been taken into special positioning or floating schemes. Block-level content generally flows in the block direction, while inline content flows within line boxes.

Understanding normal flow is important because many layouts require less CSS when the natural document flow is allowed to do the work. Flexbox and Grid establish their own formatting contexts while still participating in the surrounding page flow.

Code Example

<main class="content">
    <h1>Interview Questions</h1>
    <p>First paragraph.</p>
    <p>Second paragraph.</p>
</main>

/* No positioning is required for this vertical flow. */