Float and Clear

For quality layouts that flow nicely, you’ll likely find the float and clear CSS properties indispensable. Float allows you to horizontally stack items next to one another on the left or right, and clear lets you force an element to go beneath floated items on the left, right, or both sides. The basic concept is really that simple - but the implementation of a nice layout using float and clear can quickly become complex.

To use float, the element must be set to “position: relative”. Items that you want pinned to the left or stacked from left to right should have “float: left”, and items that you want pinned to the right or stacked from right to left should have “float: right”.

The “clear” property lets an element avoid floating elements on the left, right, or both sides. By “avoid” I mean that it comes after the floated element, filling the entire space that it is specified to fill, rather than being crammed into the left- or right-stacked floating elements.