The document flow is the model by which elements are rendered by default in the CSS specifications. In this model, elements are rendered according by their default display rule. In other words, block-level elements are displayed on a new line and inline elements on the same line. Everything is stacked in an ordered way from top to bottom. For example, in a block-level formatting context elements are rendered in the way depicted by the following picture.
The document flow can be modified by CSS through the following properties:
floatposition
Using these properties modifies the way elements are rendered by default. For example, if we use floating, then the document flow will appear as shown below.
The arrows represent the impact of floating on elements that are still in the normal flow. Bear in mind, however, that despite the fact that we can still recover the normal flow for floating by using clearing, there's no direct way to do the same for positioning.