🧭 Normal Flow and Document Flow

What Is Document Flow?

Document flow is the default way a browser arranges elements on the page before any positioning, floating, flexbox, or grid is applied. Content flows top to bottom, and — within a line — left to right (in left-to-right languages like English). It is the foundation every other layout technique builds on top of, or deliberately breaks out of.

Think of it like a river: content pours in from the top and settles into place naturally. Most of the time you want to work with that current. The whole point of understanding normal flow is knowing when the default already does the job — so you don't reach for absolute positioning to solve a problem a single margin would fix.

Normal flow is the layout you get "for free." Every advanced technique in CSS is either a refinement of it or a controlled escape from it — so it pays to know exactly what "free" gives you.

Block vs Inline vs Inline-Block

Normal flow is really two cooperating sub-systems: block formatting, where boxes stack vertically, and inline formatting, where content flows horizontally into lines. Which one an element joins depends on its display type.

Block-level elements

They start on a new line, expand to fill their container's width, honour all four margins and paddings, and stack in source order. Constraining a block's width (say, width: 60%) doesn't change its stacking — it just makes the box narrower while still owning its own line.

.block-element {
  display: block;
  width: 80%;
  margin: 20px auto;   /* auto left/right margins centre a block */
  padding: 15px;
}

Inline elements

They flow within a line of text, take only the width they need, and ignore width and height. Left and right margins and padding affect layout; top and bottom padding is painted but doesn't push surrounding lines apart.

Inline-block: the hybrid

Flows inline like text, but respects width, height, and all margins like a block. It's the reason old navbars and thumbnail grids worked before flexbox — items that sit in a row yet keep real dimensions.

Line Boxes & line-height

To lay out inline content, the browser builds invisible line boxes — one per line of text. Each line box is as wide as its container and as tall as the tallest content it holds. When content runs past the edge, a new line box forms below. This is exactly how a paragraph wraps.

The line-height property

line-height sets the minimum height of every line box and is one of the biggest levers on readability. Use unit-less values so children scale proportionally instead of inheriting a fixed computed length:

body {
  line-height: 1.5;   /* unit-less — recommended for body text */
}

h1, h2, h3 {
  line-height: 1.2;   /* tighter looks better on large headings */
}

vertical-align

Within a line box, vertical-align controls how inline (and inline-block) elements line up: baseline (default), middle, text-top, text-bottom, sub, super, or a length. It's how you nudge an icon to sit level with the text beside it — note that it only applies to inline-level and table-cell boxes, not block elements.

/* Nudge an inline icon to align with the text it sits beside */
.icon {
  vertical-align: middle;   /* or a small length like -2px for fine tuning */
}

The Box Model & box-sizing

Every element in the flow is a box with four nested layers: content, then padding, then border, then margin. How much room the box claims — and therefore how it pushes on the flow — depends on all four.

content-box vs border-box

By default (content-box), width sets only the content area — padding and border are added on top, so a "200px" box can render 250px wide. With border-box, width includes padding and border, so 200px means 200px on screen. That predictability is why nearly every codebase resets it globally:

/* content-box (default): total width = 200 + 40 + 10 = 250px */
.content-box {
  box-sizing: content-box;
  width: 200px;
  padding: 20px;
  border: 5px solid #333;
}

/* border-box: total width stays 200px; content shrinks to fit */
.border-box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid #333;
}

/* The near-universal global reset */
*, *::before, *::after {
  box-sizing: border-box;
}

Margin Collapsing

Here's a flow behaviour that surprises almost every beginner: when the vertical margins of two block elements meet, they don't add together — they collapse into a single margin equal to the larger of the two.

.box-a { margin-bottom: 30px; }
.box-b { margin-top: 20px; }
/* The gap between them is 30px, NOT 50px — the larger margin wins. */

Preventing margin collapse

When collapse isn't what you want, break the contact between the margins — the simplest reliable route is to establish a block formatting context on the parent:

/* Any one of these stops parent/child margin collapse */
.parent { padding-top: 1px; }              /* separation via padding */
.parent { border-top: 1px solid transparent; } /* or a hairline border */
.parent { display: flow-root; }            /* or a new formatting context */
.parent { display: flex; flex-direction: column; } /* flex kills collapse entirely */

Block Formatting Contexts

A block formatting context (BFC) is a self-contained region of the page with its own layout rules. It keeps turning up as the fix for the flow's rough edges, so it's worth naming directly. A BFC does four useful things:

• Contains floats — the parent grows to enclose floated children (this is the float-collapse fix from the previous lesson).
• Stops margin collapse — margins inside a BFC don't collapse with margins outside it.
• Doesn't overlap floats — a BFC sits beside a float instead of flowing under it, creating a clean column.
• Isolates layout — what happens inside stays inside.

/* The explicit, side-effect-free way to make a BFC */
.bfc {
  display: flow-root;
}

/* Other things that happen to create a BFC */
.also-bfc {
  overflow: auto;      /* or hidden */
  /* display: inline-block; */
  /* display: flex; / grid; */
  /* position: absolute; / fixed; */
}

Breaking out of the flow

Finally, remember the ways to leave normal flow entirely — each is its own tool covered elsewhere in this module:

• Positioning — absolute, fixed, and stuck sticky elements leave the flow.
• Floating — partially leaves the flow while letting content wrap.
• Flex & grid — a flex or grid container lays out its children by its own rules.
• display: none — removes the element completely, reserving no space.

Hands-on Exercise

<div class="parent">
  <div class="child">I have margin-top: 40px</div>
</div>

.parent {
  background: #e0e7ff;
  /* Before: margin of .child escapes and moves the whole parent.   */
  /* After:  flow-root contains it, so the 40px sits inside.        */
  display: flow-root;
}
.child {
  margin-top: 40px;
  background: #6366f1;
  color: #fff;
  padding: 10px;
}

Best Practices

Summary & Quiz

📚 Further Reading

• MDN — Normal flow
• MDN — Mastering margin collapsing
• MDN — Block formatting context

🚀 What's Next?

With the flow, the box model, and formatting contexts under your belt, we move on to making things look polished: shadows and visual effects — box-shadow, text-shadow, gradients, and more.