Positioning and Floats - The CSS - page 97

Floated elements cannot appear before (vertically) elements that
come before them in the document, which is why box 4 does not
appear next to box 2 even if there were room for it.

With modern layout techniques, floated elements are used for much
more than small bits of content in elements and text wrapping. They
can be the basis for placing elements on opposite sides of the same
line, controlling a series of tabs, and even controlling multiple-column
layout grids.

If an element is positioned with absolute positioning, that positioning
will take precedence over the behavior of float .

note

clear
Floating is often used instead of positioning or large margins because
the content-wrapping effects are desired, but the wrapping of a tall
floated element can often extend into later content in an undesirable
way. The clear property is used to insert a break when encountering a
new section of the layout or another unique record in a list or some other
reason for wanting to stop the wrapping effect.
■ none : The element does not clear any floats.

■ left : The element will be shifted down to sufficiently clear the bottom
edge of any previous left-floated elements.

■ right : The element will be shifted down to sufficiently clear the
bottom edge of any previous right-floated elements.

■ both : The element will be shifted down to clear and begin after all
floated elements.