CSS Normal Flow

CSS Normal Flow

Normal flow is the default way browsers arrange HTML elements on a web page before other CSS layout techniques change their position or arrangement.

When no special layout method is applied, elements appear according to their order in the HTML document and their normal display behavior. Understanding normal flow provides the foundation for learning CSS positioning, floats, Flexbox, Grid, and other layout techniques.

How Normal Flow Works

Every HTML document begins with a normal layout flow. Unless CSS changes the layout behavior, the browser places elements according to their document order and whether they participate as block-level or inline-level boxes.

For example, headings and paragraphs normally appear one after another vertically.

<h2>Learning CSS Layout</h2>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>

The heading appears first, followed by the first paragraph and then the second paragraph. No positioning or layout CSS is required to create this basic arrangement.

Block Elements in Normal Flow

Block-level boxes normally begin on a new line and are laid out vertically, one after another.

<div>First block</div>
<div>Second block</div>
<div>Third block</div>

Each <div> begins below the previous one. A block box generally expands in the inline direction to fill the available width of its containing block when its width remains auto.

div {
  padding: 10px;
  border: 1px solid #999;
}

The padding and border change the appearance and dimensions of the boxes, but they remain in normal flow.

Inline Elements in Normal Flow

Inline-level boxes normally flow within lines of text instead of beginning on a new line.

<p>Learn <strong>HTML</strong> and <strong>CSS</strong> to build web pages.</p>

The <strong> elements remain within the paragraph's line formatting instead of creating separate rows.

When inline content reaches the available edge of its container, it can wrap onto another line.

Document Order

Normal flow follows the order of elements in the HTML document. This source order is important because it provides the basic reading and navigation sequence before visual layout techniques are applied.

<header>Header</header>
<main>Main Content</main>
<footer>Footer</footer>

In normal flow, the header appears first, the main content follows it, and the footer appears afterward.

Keeping the HTML in a logical order also helps the page remain understandable when CSS is unavailable and supports users who navigate content sequentially.

Margins in Normal Flow

Margins create space around elements while those elements remain part of normal flow.

p {
  margin-bottom: 20px;
}

The bottom margin creates space between paragraphs without removing them from their normal position in the document.

Vertical margins between block elements can sometimes collapse rather than being added together. Margin collapsing is covered separately in the Box Model tutorials.

Moving Outside Normal Flow

Some CSS layout techniques can change how an element participates in normal flow or remove it from normal flow entirely.

These techniques provide greater control over layout, but they are easier to understand after learning how the page behaves without them.

Why Normal Flow Matters

Normal flow is not something that needs to be replaced throughout a website. In many cases, the browser's default layout behavior already provides the correct structure.

Headings, paragraphs, lists, forms, articles, and many other parts of a page can remain in normal flow while more specialized layout techniques are applied only where they are needed.

Starting with a logical document structure and allowing normal flow to do as much work as possible can make layouts easier to understand and maintain.

Normal Flow Example

The following example contains a heading, paragraphs, block elements, and inline content without Flexbox, Grid, floats, or positioning. Open the example in the editor and change the margins, padding, widths, or HTML order to see how the elements continue to participate in normal flow.

.box {
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid #999;
}
.highlight {
  padding: 2px 5px;
  background-color: #e6f4fa;
}