Normal Flow — CSS

Normal Flow in CSS

Normal flow is the default layout behavior of HTML elements. Block elements stack vertically and take full width, while inline elements flow horizontally within a line. Understanding normal flow is fundamental to CSS—it's the baseline from which all other layout methods (flexbox, grid, positioning) deviate. Respecting normal flow creates accessible, maintainable layouts.

What is normal flow?

HTML

<!-- Normal flow: default layout without CSS interventions -->
<body>
  <header>Header</header>
  <main>Main content</main>
  <aside>Sidebar</aside>
  <footer>Footer</footer>
</body>

<!-- Default behavior: -->
<!-- 1. Block elements stack vertically -->
<!-- 2. Each block takes 100% width -->
<!-- 3. Elements flow top to bottom -->
<!-- 4. Inline content flows left to right, wraps -->

<!-- Result without any CSS: -->
<!-- [Header - full width] -->
<!-- [Main - full width] -->
<!-- [Aside - full width] -->
<!-- [Footer - full width] -->

<!-- Normal flow respects margins and padding: -->
<!-- - Block elements have default margins (8px typically) -->
<!-- - Margins collapse between adjacent blocks -->
<!-- - Padding adds inside the element -->

<!-- Document flow order: -->
<!-- Elements appear in order they're in HTML -->
<!-- Top to bottom, left to right -->
<!-- This order affects accessibility (screen readers follow HTML order) -->

Block vs Inline elements

Type	Width	Height	Stacking	Examples
Block	Full width (100%)	Set by content	Vertical stack	div, p, h1-h6, ul, ol
Inline	Content width only	Ignore height/width	Horizontal flow	span, a, strong, em, img
Inline-block	Content width	Respect height	Horizontal flow	input, button, img (with display)

CSS

<!-- Block elements: stack vertically, take full width -->
<div>Block 1</div>
<div>Block 2</div>
<div>Block 3</div>

<!-- Default rendering (no CSS): -->
<!-- [Block 1 - full width] -->
<!-- [Block 2 - full width] -->
<!-- [Block 3 - full width] -->

/* CSS block elements: -->
div, p, h1-h6, ul, ol, li, section, article, header, footer, main, nav, aside, blockquote, form

<!-- Inline elements: flow horizontally, ignore width/height -->
<span>Inline 1</span>
<span>Inline 2</span>
<span>Inline 3</span>

<!-- Default rendering (no CSS): -->
<!-- [Inline 1][Inline 2][Inline 3] all on one line -->

/* CSS inline elements: -->
span, a, strong, em, button (sometimes), img (sometimes)

<!-- Inline-block: hybrid behavior -->
<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>

<!-- Default rendering (buttons are inline-block): -->
<!-- [Button 1][Button 2][Button 3] on same line -->
<!-- But respects width and height set on them -->

<!-- Setting display property changes flow behavior -->
span {
  display: block;  /* span now behaves like a block element -->
}

button {
  display: block;  /* button now takes full width, stacks -->
}

div {
  display: inline;  /* div flows horizontally, ignores width/height -->
}

div {
  display: inline-block;  /* div flows inline but respects width/height */
}

Margin collapse in normal flow

CSS

<!-- Margin collapse: vertical margins merge between blocks -->
<div class="box">Box 1</div>
<div class="box">Box 2</div>

.box {
  margin: 20px;
}

<!-- Expected spacing: 20px + 20px = 40px -->
<!-- Actual spacing: 20px (larger margin wins) -->
<!-- Margins collapse to the larger value -->

/* Margin collapse rules: -->
/* 1. Only vertical margins collapse (not horizontal) -->
/* 2. Only adjacent block elements in normal flow -->
/* 3. Only with block-level margins (not inline or inline-block) -->

/* Preventing margin collapse with padding: -->
.container {
  padding: 20px;  /* use padding instead of margin on children -->
}

.box {
  margin: 0;  /* or set margin inside padding -->
}

/* Or use flexbox/grid (they don't collapse margins): */
.container {
  display: flex;
  flex-direction: column;
  gap: 20px;  /* use gap instead of margin */
}

/* Margin collapse example with colors: */
<div class="parent">
  <div class="child">Child</div>
</div>

.parent {
  background: lightblue;
  padding: 0;
}

.child {
  background: lightcoral;
  margin: 20px;
  /* Margin collapses with parent, extends outside parent */
}

<!-- Child margin goes outside parent visually -->

Document flow and layout context

CSS

<!-- Normal flow creates stacking context -->
<!-- Each element has a position in the flow -->

<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>

.box {
  background: lightblue;
  padding: 20px;
  margin: 10px;
}

<!-- Renders in order: Box 1, Box 2, Box 3 -->
<!-- Top to bottom -->

/* Removing elements from normal flow: */

/* position: absolute - removed from normal flow */
.removed {
  position: absolute;
  /* No longer takes up space in normal flow */
  /* Other elements flow as if it doesn't exist */
}

/* float - removed from normal flow */
.floated {
  float: left;
  /* Removed from normal flow, other text wraps around */
}

/* display: none - completely removed */
.hidden {
  display: none;
  /* Element doesn't exist in flow or rendering */
}

/* display: contents - keeps children in flow, hides element */
.transparent {
  display: contents;
  /* Children appear in normal flow of parent */
  /* Element itself doesn't create box */
}

/* visibility: hidden - element still in flow, but invisible */
.invisible {
  visibility: hidden;
  /* Takes up space but isn't rendered */
  /* Different from display: none */
}

Respecting normal flow for accessibility

HTML

<!-- HTML semantic order matches visual order in normal flow -->
<!-- This is crucial for accessibility -->

<!-- Good: visual order = HTML order -->
<header>Navigation</header>
<main>Content</main>
<aside>Sidebar</aside>
<footer>Footer</footer>

<!-- Screen readers read in HTML order: header, main, aside, footer -->
<!-- Visual order (normal flow): header, main, aside, footer -->
<!-- ✓ Orders match - accessible -->

/* CSS with normal flow maintains accessibility: */
body {
  /* Let normal flow handle layout */
  /* Don't fight against it with positioning */
}

/* Bad: visual order ≠ HTML order (with positioning) -->
<div class="desktop-layout">
  <nav style="position: absolute; top: 0;">Nav</nav>
  <main style="position: absolute; top: 60px;">Content</main>
  <aside style="position: absolute; top: 60px; right: 0;">Sidebar</aside>
</div>

<!-- Visual order: nav (top), content (left), sidebar (right) -->
<!-- HTML order: nav, content, aside -->
<!-- Screen reader order: nav, content, aside (different from visual!) -->
<!-- ✗ Orders don't match - accessibility problem -->

<!-- Best practice: Use normal flow + flexbox/grid (preserve order) -->
<div class="layout">
  <header>Header</header>
  <div class="main-area">
    <main>Content</main>
    <aside>Sidebar</aside>
  </div>
  <footer>Footer</footer>
</div>

.layout {
  display: flex;
  flex-direction: column;
}

.main-area {
  display: flex;
  gap: 20px;
}

<!-- Visual order = HTML order -->
<!-- Screen readers happy -->
<!-- ✓ Fully accessible -->

Normal flow with different content types

HTML

<!-- Text in normal flow wraps naturally -->
<p>
  This is a paragraph with text that wraps
  to multiple lines as the viewport gets narrower.
  Words break at word boundaries respecting
  the natural flow of text.
</p>

<!-- Images in normal flow: -->
<p>
  Some text with an <img src="image.jpg"> image
  that flows inline with the text.
</p>

<!-- Default: image is inline, text wraps around it -->

<!-- Lists in normal flow: -->
<ul>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>

<!-- Items stack vertically (block) -->
<!-- Bullets flow naturally -->

<!-- Tables in normal flow: -->
<table>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
</table>

<!-- Table is block element -->
<!-- Flows vertically with other elements -->
<!-- Content inside flows by table logic -->

<!-- Forms in normal flow: -->
<form>
  <label>Name: <input type="text"></label>
  <label>Email: <input type="email"></label>
  <button type="submit">Submit</button>
</form>

<!-- Form elements flow according to their display type -->
<!-- Inputs are inline-block by default -->
<!-- Buttons are inline-block by default -->
<!-- Labels are inline by default -->

<!-- Mixed content natural flow: -->
<article>
  <h1>Article Title</h1>
  <p>Introduction paragraph...</p>
  <img src="hero.jpg" alt="Hero image">
  <p>More content flowing naturally...</p>
  <blockquote>
    A quote from somewhere
  </blockquote>
  <p>Concluding paragraph...</p>
</article>

<!-- Everything stacks and flows naturally -->
<!-- Content adapts to container width -->
<!-- Text wraps, images scale, elements stack -->

Best practices for normal flow

CSS

<!-- 1. Start with normal flow, enhance as needed -->
/* Good: simple, maintainable */
body {
  font-size: 16px;
  line-height: 1.5;
}

p {
  margin: 1em 0;
}

/* Then add flexbox/grid only where needed */
.navbar {
  display: flex;
  align-items: center;
  gap: 20px;
}

<!-- 2. Respect semantic HTML order -->
<!-- Don't use CSS to reorder content visually -->
<!-- If you need different order, fix HTML order -->

<!-- 3. Use relative units for sizing -->
.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

<!-- Adapts to content and viewport -->

<!-- 4. Let normal flow handle responsive design -->
/* Mobile-first: normal flow as base */
body {
  font-size: 14px;
}

p {
  margin: 12px 0;
}

/* Desktop: only override if needed */
@media (min-width: 768px) {
  body {
    font-size: 16px;
  }

  p {
    margin: 16px 0;
  }
}

<!-- 5. Use margin/padding for spacing, not positioning -->
/* Good: normal flow spacing */
.section {
  margin: 40px 0;
  padding: 20px;
}

/* Avoid: positioning for spacing */
.section {
  position: relative;
  top: 40px;  /* Don't do this -->
}

<!-- 6. Preserve text readability -->
body {
  max-width: 800px;  /* Comfortable reading width -->
  line-height: 1.6;  /* Readable line height -->
  font-size: 16px;   /* Readable font size -->
}

Warning

Don't fight against normal flow unnecessarily. Using `position: absolute`, `float`, or other layout methods should be intentional. Every time you remove an element from normal flow, you're making the layout more fragile and harder to maintain. Use flexbox and grid for complex layouts—they keep elements in a sensible flow.

Note

Normal flow is the default layout behavior where block elements stack vertically and inline elements flow horizontally. It's the most stable, accessible, and maintainable approach. Always preserve the HTML order visually, respect margins/padding, and use normal flow as your baseline. Only use positioning, floats, or absolute positioning when normal flow won't work.

Display property fundamentals: [display property](/css/display).