Normal Flow

CSS Normal Flow

Normal flow is the default way browsers arrange elements on a web page. Before special layout methods are applied, block elements, inline elements, and text are positioned according to their normal place in the HTML document.

What is Normal Flow?

Normal flow describes how elements are laid out when CSS has not moved them into another positioning or layout arrangement. The browser follows the structure of the HTML document and the display behavior of each element.

For a basic page containing headings, paragraphs, links, and other common elements, normal flow provides a usable layout without requiring special positioning.

Document Order

Elements in normal flow generally appear according to their order in the HTML source. Content written earlier in the document is laid out before content that follows it.

<h2>First Heading</h2>
<p>First paragraph.</p>
<p>Second paragraph.</p>

The heading appears first, followed by the first paragraph and then the second paragraph. This natural document order also provides a logical structure before more advanced CSS layout is applied.

Block Elements in Normal Flow

Block elements normally create block-level boxes that are placed one after another vertically. When their width is auto, block boxes generally use the available width of their containing block.

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

Common elements that normally behave this way include headings, paragraphs, and <div> elements.

Inline Elements in Normal Flow

Inline elements participate within lines of text rather than normally beginning on a new line. They flow alongside surrounding inline content and wrap onto another line when there is not enough horizontal space.

<p>This paragraph contains a <strong>strong element</strong> and a <a href="#">link</a> within the text.</p>

Elements such as <a>, <span>, and <strong> normally participate in inline layout.

Spacing in Normal Flow

Margins, padding, and borders affect the spacing and size of elements while they remain in normal flow.

.box {
  margin: 20px;
  padding: 15px;
  border: 2px solid #0088cc;
}

The margin creates space outside the border, while padding creates space between the content and border. These box model properties do not by themselves remove an element from normal flow.

Vertical margins between certain block elements can also collapse, as covered in the Margin Collapsing tutorial.

Relative Positioning and Normal Flow

An element with position: relative; remains part of normal flow. Its original space is preserved even when offset properties visually move the element.

.box {
  position: relative;
  top: 10px;
  left: 20px;
}

The box is displayed 10 pixels lower and 20 pixels farther to the right, but surrounding elements are still laid out according to the box's original position.

Removing Elements from Normal Flow

Some CSS techniques remove an element from normal flow. An absolutely positioned element, for example, no longer occupies its normal space in the document.

.box {
  position: absolute;
  top: 20px;
  left: 20px;
}

Other content is laid out as though the absolutely positioned element were not occupying its original location. Fixed positioning also removes an element from normal flow.

Floated elements behave differently from ordinary normal-flow elements and affect how surrounding content flows around them. Floats are covered in the next tutorial.

Normal Flow and Modern Layout

Flexbox and Grid change how the direct children of a container are laid out. Setting display: flex; or display: grid; establishes a specialized layout system for those children.

.flex-container {
  display: flex;
}

.grid-container {
  display: grid;
}

Normal flow remains an important foundation even when Flexbox or Grid is used. Content outside those layout containers continues to follow its normal layout behavior unless other CSS changes it.

Try Normal Flow

Edit the example to see how block and inline elements behave in normal flow. Try changing the display values and notice how the arrangement of the elements changes.

Why Normal Flow is Important

Normal flow provides the starting point for CSS layout. Understanding where elements naturally appear makes it easier to recognize what changes when positioning, floats, Flexbox, or Grid are introduced.

Keeping content in a logical document order also helps a page remain understandable when CSS is unavailable or when the layout changes for different screen sizes.

Summary

Normal flow is the browser's default method of arranging page content. Block elements generally flow vertically, inline elements flow within lines of text, and elements normally appear according to their document order. Box model properties can change spacing without removing elements from normal flow, while techniques such as absolute and fixed positioning can take elements out of normal flow.

The next tutorial covers Floats & Clearing and explains how floated elements affect the flow of surrounding content.