Normal Document Flow

Normal Document Flow

Before you can reposition elements, you need to understand how the browser lays them out by default. This default layout is called the normal document flow.

What Is Document Flow?

Document flow is the browser's default algorithm for placing elements on the page. Without any CSS positioning, elements follow two simple rules based on their display type.

Block-Level Elements

Block elements take up the full width of their container and start on a new line:

<div>Block 1</div>
<div>Block 2</div>
<p>Block 3</p>

Each one stacks vertically, one below the other.

Common Block Elements

Element	Purpose
<div>	Generic container
<p>	Paragraph
<h1>–<h6>	Headings
<ul>, <ol>	Lists
<section>, <article>	Semantic containers
<header>, <footer>	Page sections

Inline Elements

Inline elements only take up as much width as their content needs and sit side by side on the same line:

<span>Inline 1</span>
<span>Inline 2</span>
<a href="#">Inline 3</a>

They flow horizontally like text in a sentence. They wrap to the next line only when they run out of space.

Common Inline Elements

Element	Purpose
<span>	Generic inline container
<a>	Link
<strong>, <em>	Bold, italic
<img>	Image (inline by default)
<code>	Code snippet

Inline-Block

The display: inline-block value gives you the best of both worlds:

• Sits on the same line like an inline element
• Respects width, height, padding, and margin like a block element

.box {
    display: inline-block;
    width: 100px;
    height: 100px;
    background: #6c5ce7;
}

How Flow Affects Positioning

Every positioning technique we'll learn in this series works by taking elements out of or adjusting elements within the normal flow:

• Float — removes element from normal flow, text wraps around it
• Position: relative — offsets element but keeps its space in the flow
• Position: absolute — completely removes element from flow
• Position: fixed — removes from flow, fixed to viewport

Key Takeaways

• Block elements stack vertically and take full width
• Inline elements sit side by side and only take content width
• inline-block combines inline flow with block sizing
• All positioning techniques modify or break out of normal flow