Css Flexbox vs Css Floats
Flexbox is a real layout system; floats are a hack from 2003 that we abused for a decade because we had nothing better. One was built for layout. One was built to wrap text around images. Pick accordingly.
The short answer
Css Flexbox over Css Floats for most cases. Floats were never a layout tool — they were a magazine text-wrap feature we strong-armed into doing columns because the alternative was tables.
- Pick Css Flexbox if building literally any layout in a browser made after 2015 — navbars, cards, toolbars, centering, equal-height columns. That's all of you
- Pick Css Floats if genuinely need text to wrap around an inline image or pull-quote. That is the one job floats were actually designed for
- Also consider: For full two-dimensional page layout (rows AND columns at once), reach past both for CSS Grid — Flexbox is one-dimensional by design.
— Nice Pick, opinionated tool recommendations
What they actually are
Flexbox is a layout module purpose-built to distribute space along a single axis and align items within it. You declare intent — space-between, center, stretch — and the browser does the math. Floats are the opposite: a property invented so text could flow around an image, like a newspaper. For roughly 2007 to 2015 we hijacked floats to build entire page grids because the only alternative was layout tables, which were worse. That history matters. Every float-based layout you've ever seen is a workaround standing on a workaround. Flexbox isn't an improved float — it's the thing floats were always pretending to be, finally shipped as a first-class citizen. Treating them as comparable layout choices in 2026 flatters the float more than it deserves. One is a tool; the other is a survivor of an era when we had no tools.
The clearfix tax
Floats break their own parent. A container holding only floated children collapses to zero height because floated elements are pulled out of normal flow — so the parent thinks it's empty. The fix is the infamous clearfix: a pseudo-element with content:'' and clear:both, copy-pasted into a million stylesheets by people who couldn't tell you why it works. Then there's clearing siblings, the float-drop bug when widths don't add up, and the way margins behave unpredictably between floated boxes. Flexbox has none of this. A flex container hugs its children correctly, full stop. No clearfix, no collapse, no haunted utility class inherited from a 2011 Bootstrap fork. The clearfix is the single clearest receipt that floats were never meant for this: an entire folk-remedy industry grew up around papering over the side effects of misusing the feature. Flexbox deleted that whole category of bug by simply being designed for the job.
Alignment and equal-height columns
Vertical centering was the canonical CSS joke for fifteen years, and floats are why. With floats you cannot center a box vertically or make two columns the same height without absurd hacks — negative margins, padding-bottom plus margin-bottom tricks, faux-column background images, or a JavaScript resize listener. People genuinely shipped JS to equalize float column heights. Flexbox makes it one line: align-items: stretch (the default) gives equal-height columns for free, align-items: center vertically centers, justify-content handles horizontal distribution. Reordering visually without touching the HTML — the order property — is impossible with floats short of rewriting markup. Flexbox treats alignment as the core problem to solve; floats treat it as not their department, because it wasn't. If your design has a sidebar that must match the article's height, or a nav that's centered against a logo, floats force you into workarounds while Flexbox just expresses the intent.
When floats still earn their keep
Credit where it's due: floats have exactly one job they still do better, and it's the one they were born for. If you want body text to wrap around a thumbnail, a drop-cap, or a pull-quote, float that element left or right and the text flows around it naturally. Flexbox cannot do this — it lays out flex items as blocks on an axis; it has no concept of inline text reflowing around a sibling. Shape-outside even lets floats wrap text around circles and polygons, which is genuinely elegant. So floats aren't dead, they're demoted: a typographic detail tool, not a layout engine. Use float for the magazine effect inside a paragraph and Flexbox (or Grid) for the page around it. That division of labor is the honest one — and it's been the correct one since the day Flexbox shipped. Stop building columns with floats; you have better tools.
Quick Comparison
| Factor | Css Flexbox | Css Floats |
|---|---|---|
| Designed for layout | Yes — purpose-built layout module | No — built for text-wrapping images |
| Equal-height columns | Default behavior (align-items: stretch) | Requires hacks or JavaScript |
| Vertical centering | One line (align-items: center) | Notoriously painful, needs workarounds |
| Parent collapse / clearfix | None — container hugs children | Collapses; needs clearfix everywhere |
| Text wrapping around an element | Impossible | Native, with shape-outside support |
The Verdict
Use Css Flexbox if: You are building literally any layout in a browser made after 2015 — navbars, cards, toolbars, centering, equal-height columns. That's all of you.
Use Css Floats if: You genuinely need text to wrap around an inline image or pull-quote. That is the one job floats were actually designed for.
Consider: For full two-dimensional page layout (rows AND columns at once), reach past both for CSS Grid — Flexbox is one-dimensional by design.
Floats were never a layout tool — they were a magazine text-wrap feature we strong-armed into doing columns because the alternative was tables. Flexbox does alignment, distribution, ordering, and equal-height columns natively, with no clearfix, no collapsed parents, and no source-order gymnastics. There is no modern layout problem where reaching for float is the right answer.
Related Comparisons
Disagree? nice@nicepick.dev