"Floats are perfect for pull quotes."Magazines often highlight a memorable line from an article as a pull quote. A float lets the quote sit to one side while the article text flows around it, drawing the reader's eye without interrupting the paragraph. On narrow screens you might remove the float with a media query so the quote spans the full width.
Floats & Wrapping Text
Floats were designed to let text wrap around images, like in a magazine. For years they were also (mis)used to build whole page layouts. Today Flexbox and Grid handle layout, but floats are still the right tool for wrapping text — and understanding them helps with older code.
Floating an image
Strawberries are one of the first fruits to ripen in spring. This paragraph flows around the floated image, wrapping alongside it and then continuing underneath once it passes the bottom of the picture. Floats are still the simplest way to get this magazine-style text wrap on the web.
Result
float: left or right moves an element to one side and lets inline content (text) wrap around it. The margin keeps text from touching the image.
Clearing floats
A short paragraph next to a tall image.
This paragraph uses clear: both, so it starts below the image instead of wrapping beside it.
Result
clear: left, right or both makes an element start below any floats on that side.
Containing floats
Floats don't count towards their parent's height, so a container with only floated children collapses. display: flow-root fixes this cleanly. (Older code uses the "clearfix" hack, a ::after pseudo-element with clear: both.)
Wrapping text around shapes
shape-outside makes text wrap around a circle, ellipse, polygon or image transparency instead of the float's rectangle.
Drop caps with initial-letter
Don't use floats for layout
Float-based grids needed clearfixes, careful widths and negative margins, and broke easily. Flexbox and Grid make columns, equal heights and vertical centring simple: