Floats

Floats

Floats

<p>...
<img class="float-left" src="...">
...</p>

.float-left {
float: left;
}

The float CSS property specifies that an element should be placed along the left or right side of its container, allowing text and inline elements to wrap around it.
The element is removed from the normal flow of the web page, though still remaining a part of the flow (in contrast to absolute positioning).
A floating element is one where the computed value of float is not none.
As mentioned above, when an element is floated, it is taken out of the normal flow of the document (though still remaining part of it). It is shifted to the left, or right, until it touches the edge of its containing box, or another floated element.

Flex Box

Flex box

.main-content

.other-content

.sidebar

At first, this layout looks like it can be solved with `flex-direction: column`.
But the height of content is unknown so we don't know where to set the wrapper
height so that sidebar can be wrapped to next column.