Float-Based Layouts: How CSS Worked Before Flexbox and Grid

Before Flexbox and Grid existed, float was the primary tool for building multi-column layouts — a property originally designed for wrapping text around images, bent into service for entire page structures.

.sidebar {
    float: left;
    width: 250px;
}

.main {
    margin-left: 270px; /* manually calculated to avoid the float */
}

/* The classic "clearfix" hack, needed because floated elements
   don't contribute to their parent's height */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

Why It Was Painful

Floats required manually calculating margins to avoid overlap, the notorious clearfix hack just to make a parent container recognize its floated children’s height, and equal-height columns were nearly impossible without JavaScript. Flexbox and Grid didn’t just add convenience — they solved problems float-based layout genuinely couldn’t solve cleanly at all.