Normal flow: how the browser lays out content by default

A layout algorithm you never had to write

Every page in this series so far was laid out correctly without a single layout rule. Headings stack above paragraphs, and a <strong> word sits inside its sentence instead of jumping to its own line. That's no accident. It's the browser's built-in layout algorithm, called normal flow, which runs on every element that doesn't ask for something else.

Two kinds of boxes, two different rules

The CSS box model course showed that every element renders as a rectangular box. Normal flow adds one idea: each box follows one of two layout patterns, set by the element's display value. This course covers those two patterns, plus a hybrid that lesson 4 introduces.

flowchart TB
  subgraph BL["Block-level boxes — each on its own line, full width"]
    direction TB
    B1["block one"]
    B2["block two"]
  end
  subgraph IN["Inline-level boxes — flowing together on one line"]
    direction LR
    I1["word"] --- I2["another"] --- I3["more"]
  end
  BL --> IN

Block-level boxes stack vertically. Each takes the full available width and starts on a new line, like paragraphs, headings and page sections. Inline-level boxes flow side by side within a line of text, like words. They wrap to a new line only when they run out of room, like a bold word or a link inside a sentence.

Every element has a default

You've relied on this since the first HTML course. A <p> behaves as block and a <strong> behaves as inline without any CSS. Every HTML element ships with a default display based on the content it usually holds. That's why plain, unstyled HTML already reads top to bottom in a sensible order.

<h2>A Heading</h2>
<p>A paragraph with a <strong>bold phrase</strong> and a <a href="#">link</a> inside it.</p>

<h2> and <p> are block-level by default, each on its own line. <strong> and <a> inside the paragraph are inline by default and flow with the surrounding words. Nobody wrote display anywhere in that snippet; the browser already knew.

display is just a CSS property like any other

Here's the detail this course is built around. display is an ordinary CSS property, like color or padding. An element's "default" is just the browser's built-in stylesheet setting that property before your CSS runs. You can override it: display: inline on a <div>, display: block on a <span>. The element switches layout behavior and keeps its HTML meaning. The next lessons cover that override and what it changes.

What this course covers

• Lesson 1, Normal flow: the browser's default layout algorithm and its two box types (you are here)
• Lesson 2, display: block: full width, stacked, one per line
• Lesson 3, display: inline: flows with text, ignores width and height
• Lesson 4, display: inline-block: the hybrid that sits in a line and respects sizing
• Lesson 5, display: none vs visibility: hidden: two ways to make something disappear
• Lesson 6, Overriding the default: changing any element's display on purpose
• Lesson 7, Putting it together: reading a real page's flow, box by box

By the end, you'll be able to predict how any element behaves in the flow, with its default or with a value you chose.