CSS Layout
Normal Flow
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
positionor 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.