Normal Flow
Normal flow is the browser's default layout behavior. Block-level elements generally occupy available inline space and stack vertically, while inline elements participate in line formatting.
Modern CSS layout systems such as Flexbox and Grid provide controlled alternatives when normal flow alone is insufficient.
Normal Document Flow
Normal Flow
.article {
max-width: 70ch;
}
.article p {
margin-block: 1rem;
}💡 Paragraphs naturally participate in document flow and stack according to their block formatting behavior.
Key Takeaways
- Normal flow should generally be the starting point.
- Avoid absolute positioning for ordinary document layout.
Knowledge Check
What is normal flow?