Normal Flow CSS Layout – Explained with an Example
Normal flow is the default way of laying out elements on an HTML page.
In other words, an HTML page is in a normal flow layout when you do nothing to rearrange the default positioning of its elements.
Example: Normal Flow Demonstration
<h2>Hello there! 👋 I am CodeSweetly</h2>
<p>My favorite colors are:</p>
border: 2.5px solid rgb(210, 105, 30);
background-color: rgba(210, 105, 30, 0.5);
border: 2.5px solid rgb(76, 210, 30);
background-color: rgba(76, 210, 30, 0.5);
border: 2.5px solid rgb(103, 30, 210);
background-color: rgba(103, 30, 210, 0.5);
Suppose you do nothing to manipulate the default layout. In that case, browsers will display the above snippet in its normal flow like so:
Hello there! 👋 I am CodeSweetly
My favorite colors are:
In other words, a normal flow CSS layout makes browsers display a page's elements precisely as you arranged them in the source code.
A well-structured HTML document is one that you can easily read in its normal flow. Moreover, such web pages are accessible to screen readers and users with limited browser features.