02 · Float

The gray figure floats to the start of the line and the paragraphs wrap around it. Floats are for wrapping text around a figure, not for page layout.

This figure has float: inline-start and a fixed inline size.

Before flexbox and grid, floats were how the web did columns. A floated box is shifted to one side and removed from normal flow; the text that follows shortens its lines to run alongside it.

Keep reading and the lines keep wrapping. This figure is taller than all three paragraphs, so every line stays narrow — text only returns to full width once it passes the bottom of a float.

Floats were designed for exactly this — images in running text — which is why using them for whole page layouts always felt like a workaround.