CSS Layout

Normal Flow

Written by Swapnil RajaPublished 30 Jul 2026

Understand block flow, inline flow, formatting contexts, containing blocks, and why positioned elements use particular reference boxes. The lesson explains block and inline flow, containing blocks, formatting contexts, margin behavior, and the reference used by positioned descendants.

Normal flow is the browser’s default layout algorithm for block and inline content. Flexbox, Grid, floats, and positioning modify selected relationships; they do not replace the document’s underlying flow.

Before changing a layout property, identify which algorithm currently owns the element. A block in normal flow behaves differently from a grid item, and an absolutely positioned child measures offsets from a particular containing block. Many positioning bugs come from assuming that reference is the nearest visible box. This topic also connects with CSS Display and CSS Position.

Normal flow is the default layout system

Block boxes stack in the block direction. Inline content flows into line boxes. Flexbox, Grid, floats, and positioning modify parts of this behavior, but normal flow remains the baseline.

Containing blocks answer “relative to what?”

Example

css

.card {
  position: relative;
}

.card__badge {
  position: absolute;
  inset-block-start: 0.75rem;
  inset-inline-end: 0.75rem;
}

The positioned card establishes the containing block for its absolutely positioned badge. Transforms, containment, and several other properties can also establish containing blocks.

Create a new formatting context deliberately

Example

css

.article {
  display: flow-root;
}

flow-root creates a block formatting context. It contains internal floats and prevents certain margin-collapsing interactions without using overflow as an unrelated workaround.

Flow Display Values

Value	Formatting behavior	Example
block	Creates a block-level flow box.	display: block
inline	Participates in an inline formatting context.	display: inline
inline-block	Flows inline while accepting block dimensions.	display: inline-block
flow-root	Creates a new block formatting context.	display: flow-root

Complete Example

Run the complete document below in the Try It editor. Resize the preview or interact with the controls where the example calls for it.

Complete runnable example

html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Normal Flow example</title>
  <style>
    * { box-sizing: border-box; }
    body {
      margin: 0;
      padding: 2rem;
      font-family: system-ui, sans-serif;
      line-height: 1.5;
    }
    main { max-width: 70rem; margin-inline: auto; }
    article, section, aside, form, .card, .panel {
      padding: 1rem;
      border: 1px solid #cbd5e1;
      border-radius: 0.6rem;
    }

.card {
  position: relative;
}

.card__badge {
  position: absolute;
  inset-block-start: 0.75rem;
  inset-inline-end: 0.75rem;
}

.article {
  display: flow-root;
}
  </style>
</head>
<body>
  <main class="article"><article class="card"><span class="card__badge">New</span><h1>Containing block</h1><p>The badge is positioned against this card.</p></article></main>
</body>
</html>

Browser Support

Feature	Chrome	Edge	Firefox	Safari
display: flow-root	58	79	53	13

Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8. A partial-support note is included where it changes how the example behaves.

Notes

Before changing position or adding a large z-index, identify the containing block and stacking context.
Test the example with real content, keyboard input, browser zoom, and the narrowest layout your project supports.
Use a fallback when the support table shows that one of your required browsers predates the feature.

Conclusion

Identify normal flow, the containing block, and the formatting context before changing positioning.

Use normal flow whenever content should naturally push later content down the page. Reach for flow-root when a formatting context is the actual requirement, and establish positioned containing blocks intentionally so descendants do not depend on an accidental ancestor.

PreviousCSS Width and Height NextCSS Display