Normal flow: how the browser stacks elements by default

What "no CSS" looks like

Before flexbox, grid, or any positioning — every element follows normal flow:

• Block elements (<div>, <p>, <h1>) stack VERTICALLY, each taking the full width of the parent.
• Inline elements (<span>, <a>, <strong>) flow HORIZONTALLY inside text, wrapping at line breaks.

<div>Block 1</div>
<div>Block 2</div>
<span>inline a</span> <span>inline b</span>

The result is a vertical stack of two divs, then a line with the two spans next to each other.

Why normal flow matters

Normal flow IS your layout most of the time:

• Article body — paragraphs stack vertically.
• Form — labels and inputs in a column.
• Sidebar navigation — links stacked.

Reaching for flexbox or grid on simple vertical stacks is overkill. <div>s already stack vertically for free.

When you NEED a layout engine

• Horizontal alignment ("3 cards in a row") → flexbox.
• 2-axis ("sidebar + main + topbar") → grid.
• Positioned overlays (modals, tooltips, sticky headers) → position: fixed/absolute/sticky.

This module visits each in order: float (briefly, for history), then flexbox in depth, then grid (next module).