50. Floating Elements (Historical Layout Tool)

Historically, the float property was used for complex column layouts before Flexbox and Grid. Its original purpose was to wrap text around images, similar to desktop publishing.

How Floats Work

When an element is floated (left or right):

1. It is taken out of the normal flow, but still affects the position of other elements.
2. Block elements following the float will wrap around the floated element.
3. The element's parent container (the box that holds the float) will collapse its height around the float.

css .image-float { float: left; /* Image moves to the far left of its container / margin-right: 15px; / Creates space between the image and the text */ }

The Clearfix Problem

The most significant challenge with floats is that they cause the parent container to collapse its height. This requires fixing, traditionally done with the Clearfix Hack.

css /* The Clearfix Hack (needed on the parent container) / .clearfix::after { content: ""; display: table; clear: both; / Stops the effects of floats above it */ }

Modern Context: float should now be reserved primarily for its intended purpose: arranging text around small elements like images or icons. Never use floats for major page layout; use Flexbox or Grid instead.