Block flow
Block elements stack vertically and usually fill the available inline space.
Platform under construction
Normal Flow
Normal flow is the browser layout before you force anything. Blocks stack, inline content flows and the document stays readable by default.
.article > * + * {
margin-block-start: 1rem;
}
Layout
Normal flow is the layout you get before you interfere.
HTML already has layout behavior. Paragraphs, headings and sections stack as blocks. Links and emphasized text flow inline inside a line. Images and form controls have their own intrinsic sizes.
Normal flow is important because it is resilient. Content can grow, wrap and remain readable without a complex layout system.
Professional CSS starts with normal flow and only reaches for flex, grid or positioning when the content shape actually requires it.
Inline flow
Inline content sits within text lines and wraps with text.
Document order
The visual reading order follows the markup unless CSS changes it.
Intrinsic behavior
Many elements have natural size and flow before custom CSS is applied.
Visual model
Layout is easier when you can name the relationship.
Good layout CSS is not a pile of positions. It is a set of relationships: flow, axis, tracks, placement, layering, sticking and rhythm.
Header block
A block starts on a new line and occupies the available width.
Paragraph block
Text wraps naturally inside the available measure.
Inline link
Inline content sits in the text flow instead of creating a new row.
Next block
The next block continues after the previous one.
Examples
Use the layout tool that matches the shape of the problem.
Let content flow first
.article {
max-width: 68ch;
}
.article > * + * {
margin-block-start: 1rem;
}
Forcing layout too early
.article h1 { position: absolute; top: 40px; }
.article p { height: 80px; overflow: hidden; }
.article a { display: block; margin-left: 200px; }
Rules that matter
Strong layout CSS stays readable when the screen changes.
Layout work is where real content, real devices and real users expose weak assumptions. The goal is a structure that explains itself in code and survives change.
Start without layout tools
Check what the browser already does before adding flex or grid.
Keep reading order honest
Visual order should usually match source order.
Use max-width for text
Readable text needs a comfortable measure.
Avoid fixed heights for text
Text content should be allowed to grow.
Use flow spacing
Adjacent sibling spacing can create calm vertical rhythm.
Debug by removing CSS
If layout breaks, remove forced layout and see how normal flow behaves.
Production thinking
Layout quality shows up when content stops being perfect.
Why does this matter?
Normal flow is the foundation that makes responsive pages resilient. When you understand it, you stop fighting the browser.
Accessibility
Source order matters for keyboard navigation and assistive technologies. Do not visually reorder important content without a clear reason.
Production note
Use normal flow for articles, forms, stacked content and simple sections. Save heavier layout systems for real layout problems.
SEO note
Readable source order and content flow help search engines and users understand page structure.
Live code lab
Change the CSS and watch the interface respond.
The preview runs in an isolated iframe. Links and forms stay inside the practice area, so you can experiment without leaving the lesson.
Mini assignment
Try this now.
- Remove the display grid on body and notice that the article still reads.
- Set .article p to height: 40px and explain what breaks.
- Change max-width from 68ch to 100ch and judge readability.
Practice assignment
Do this before moving to the next lesson.
- Create a simple article with heading, paragraphs and one inline link.
- Use normal flow and only add max-width and vertical rhythm.
- Explain what would be worse if you used absolute positioning here.
Try it yourself
Let an article flow naturally
Self-check
Before you continue, prove that you understand Normal Flow.
Answer these questions before moving on. If the answer is vague, change the lab layout and inspect the result.
- Can you explain normal flow without naming flex or grid?
- Can you identify block and inline behavior?
- Can you keep visual order close to source order?
- Can you use max-width for readable text?
- Can you avoid fixed heights for flowing text?
Senior audit upgrade
Normal flow deserves extra weight.
Many beginners skip directly to flexbox and grid. Senior CSS starts by asking what the browser already does well before adding layout machinery.
Default resilience
Headings, paragraphs, lists and sections already stack and wrap in useful ways.
Less CSS
If normal flow solves the layout, adding flex or grid can create unnecessary complexity.
Better debugging
Removing custom layout often reveals whether the problem is content, spacing or a forced layout decision.