Normal Flow

Understand how the browser lays out elements by default — top to bottom, left to right.

Step 1 of 4

How the browser lays out your page

When you write HTML, the browser reads it top-to-bottom and places each element in the order it appears in your source code. This default behavior is called "normal flow." Without any CSS, block elements (like headings and paragraphs) stack vertically — one on top of the other — and inline elements (like links and bold text) flow horizontally like words in a sentence. Every layout technique you will learn later — flexbox, grid, floats — modifies or overrides normal flow. Understanding it is the foundation of all CSS layout.

Think of it this way: Think of reading a book. You read each line left to right, and when a line ends you move down to the next one. Paragraphs stack top to bottom. The browser does the same thing with your HTML elements — it places them in reading order, one after another.

Web Standard

Normal flow is the foundation of all CSS layout. Every element starts in normal flow. Flexbox, grid, and floats all take elements out of or modify normal flow — but the browser always begins here.

Learn more on MDN

CSSNormal flow CSSdisplay