The flow of elements is defined by position property. The default value for all elements is static.

position:static;/*Default value*/

This is called normal flow or static flow.

CSS applies static flow based on the default values of the display property setting either a block or inline behavior to an element.

There are many values for the display property including block and inline. For example inline-block, list-item and table are a few possible values. The end result is that the element gets a block or inline behavior.

All text and inline element static flow behavior is from left to right and break on white space to the next line as needed to fit the available width.

Examples of inline elements include em, strong, img, and span.

The block element static flow behavior breaks the content flow and starts it on the left under any previous content.

For example the div, h1…h6, p, ul, li and blockquote are block elements.

In this example all elements are rendered as static flow.

Here are the elements inside the body element.

The block elements are shown in black and the inline elements are shown in white.

Static Flow and Nested Block Elements

Nesting block elements does not change how static flow works. You can see that in the previous example. The h1, h3, ol, p and blockquote elements were nested inside of div elements.

In this example the last two div elements shown in yellow were moved inside the preceding div element shown in blue.

The order of the elements changed but retained a static flow layout.

Static Flow and Block Element Widths

Reducing the width of a block element does not change the static flow of the element. The following example you might expect if the widths of two adjoining block elements are together 100% or less the width of their container they would flow inline with each other.

Good news is that the static flow layout is small screen friendly and the starting point for designing mobile layouts.