Float: what it was for, why we don't use it anymore

A 25-year-old layout tool

float: left was the ONLY way to do multi-column layouts from 1996 until flexbox shipped in 2014. Every grid system (Bootstrap 1-3, 960.gs, Foundation 4) was built on float hacks.

.sidebar { float: left; width: 30%; }
.main { float: right; width: 70%; }

The element is pulled out of normal flow and pushed to the left or right edge of its container. Following content wraps AROUND it.

Why floats fell out of favor

• Container collapse — a parent with only floated children has zero height (you needed "clearfix" hacks).
• Vertical alignment was nearly impossible.
• Equal-height columns required JavaScript or CSS tricks.
• The intent ("floats" were originally for text-wrap around images) never matched "put two columns next to each other."

Flexbox solved all of this in 2014. Grid added the second axis in 2017. Modern CSS doesn't need float for layout.

When float is STILL the right tool

ONE case: wrapping text around an image (or pull-quote).

.pullquote {
  float: right;
  width: 200px;
  margin: 0 0 16px 24px;   /* gap so text doesn't crowd */
}

That's it. Outside this exact case, use flexbox or grid.