Grid CanyonISSUE #6 of 27

float · clear · the legacy layout

FlexboVSThe Float Phantom

Flexbo saysfloat pulls an element left or right and wraps text around it — a legacy tool, now niche.

float:left/right was the old way to build columns; today flex and grid do that better. Float's remaining good use is its original one: floating an image so text wraps around it. Floats need clearing so following content doesn't ride up beside them.

Power-ups you unlock

float:left/right, text wraps around
Legacy layout tool — prefer flex/grid
Good use: wrapping text around an image
Clear floats so siblings don’t overlap

The Float Phantom attacks — common mistakes

Building whole layouts with floats today
Forgetting to clear → collapsed parents
Floats on flex/grid items (ignored)

Boss battleFloat an image left and let a paragraph wrap around it.

Example code

<!doctype html><html><head><meta charset="utf-8">
<style>img{float:left;margin:0 14px 8px 0}p{color:#e6e0ff}</style></head><body style="background:#06040d;padding:20px"><img src="https://via.placeholder.com/80" alt=""><p>text wraps around the floated image, which is float’s one enduring use case.</p></body></html>

▶ Open the interactive comic issue

‹ Overflow · Visible · Hidden · Scroll · Auto Opacity · Transparency ›