Normal Flow

Before you write a single display: flex or grid-template-columns, the browser already has a plan for your page. That plan is normal flow — the default layout algorithm that runs automatically when no other layout property overrides it. Every other system in this module is best understood as a deliberate departure from what you learn here.

Block formatting context

Most of the elements you write — <div>, <p>, <h1>, <section> — are block-level. In a block formatting context, each block-level box occupies its own line. Boxes stack vertically, one on top of the next, from the top of the containing area downward.

<div style="border: 2px solid steelblue; padding: 8px;">First</div>
<div style="border: 2px solid tomato; padding: 8px;">Second</div>
<div style="border: 2px solid seagreen; padding: 8px;">Third</div>

Those three <div> elements render as three horizontal bands, stacked top to bottom. No CSS is needed — that is the default. Each one stretches to fill the full available width of its parent.

Two important consequences fall out of this:

• Adjacent vertical margins collapse. If the first box has margin-bottom: 16px and the second has margin-top: 12px, the gap between them is 16px, not 28px. The larger value wins.
• Block-level boxes expand to fill the container's content width automatically, which is why a <div> without a width set fills the whole line.

Inline formatting context

Inline-level content — text, <span>, <a>, <strong> — participates in an inline formatting context. Inline boxes flow left-to-right (in left-to-right languages), sitting side by side on the same line baseline. When they run out of horizontal space, they wrap to the next line.

<p>
  This sentence has <strong>bold text</strong> and a
  <a href="#">link</a> that all flow together as one line of inline content.
</p>

A <p> element is block-level — it starts on its own line. But inside that block, the text and inline elements within it participate in an inline formatting context, flowing horizontally and wrapping as needed.

Why normal flow matters for everything that comes after

Flexbox and Grid do not replace normal flow — they establish a new formatting context for an element's children, overriding the default. When you write display: flex, you are saying: "take these children out of normal flow and give them to the Flexbox algorithm instead."

Understanding what you are escaping from makes the escape make sense:

• Flexbox escapes the single-file vertical stack of block layout, giving you flexible row and column arrangements.
• Grid escapes both block and inline flow entirely, giving you a two-dimensional track system.
• Positioning (position: absolute, fixed) removes an element from flow altogether — other elements act as if it does not exist.

Knowing this also tells you when not to reach for Flexbox. A set of <p> tags that should stack vertically with breathing room? That is already what block layout does. Adding Flexbox gives you nothing and costs you a mental model.

When normal flow is enough

Normal flow handles more than beginners expect:

• Vertical stacks of content — use margin and padding, not layout systems.
• Text wrapping around block elements — that is inline flow at work.
• Full-width sections — block elements expand to fill the container automatically.

Reserve Flexbox and Grid for the moments when you need items arranged in a specific direction, aligned across a container, or placed in a two-dimensional grid. Normal flow is not a fallback to be replaced at the first opportunity — it is a tool with appropriate uses.

Where to go next

Now that you know what the browser does by default, you are ready to see the first deliberate override: Flexbox Basics — how display: flex turns a list of block children into a flexible row or column arrangement.