= CSS float
{c}
A <CSS float> is a box shifted toward the left or right under the applicable flow rules, allowing surrounding inline content to wrap beside it. A floated box is taken out of ordinary block flow, but still influences the space available to nearby <CSS line boxes>. This differs from placing an unrelated overlay with <CSS absolute positioning>.<Visual formatting model in CSS 2.2 by W3C>[§9.5, Floats]{ref}
For an illustrative horizontal layout, a container is $240$ <CSS pixels> wide and a left float has width $80$, height $60$, and zero margins, padding and borders. Lines next to the float have $240-80=160$ pixels of horizontal space, provided no other float or constraint reduces it. Below the float's bottom, a line can again use the full $240$ pixels. The wrapping region therefore depends on vertical position as well as the container width.
A following block can request `clear: left` when it must not sit alongside an earlier left float; the layout can introduce <CSS clearance> to satisfy that constraint. This changes placement rather than deleting or resizing the float.<Visual formatting model in CSS 2.2 by W3C>[§9.5.2, controlling flow next to floats and clearance]{ref}
The floated box also establishes a <CSS block formatting context> for its own contents. Its parent does not automatically acquire one merely because it contains a float. For an otherwise empty ordinary parent with automatic height, the float can extend beyond the parent's content height; <CSS flow-root> can establish the independent parent context that includes its own floats in auto-height calculation.
Use floats when interaction with surrounding flow is intended. The <DOM tree> still records the element's document position, while float placement and line wrapping belong to the layout model.
Back to article page
