The Legacy Vocabulary: float, clear, table-display, and Why They're Retired

"Knowing the legacy isn't nostalgia — it's so you recognize the patterns when you read old code and don't reach for them in new code."

Why This Lesson Exists

Three layout techniques carried the web from 1996 to about 2017: floats, inline-block, and display: table. Each was a clever workaround for the fact that CSS had no real layout primitive. Flexbox (2017 baseline) and Grid (2017 baseline) replaced them. We name them here so you (1) recognize them when reading older codebases, (2) understand the original intent, (3) and don't accidentally reach for them in new code.

Float: The Image Wrap That Became Layout

float: left and float: right were designed for one thing: wrapping text around an image or pull-quote. The element moves to the side, and inline content (text) flows around it. This is still float's correct, supported use.

The web took float far beyond that. Two-column layouts, three-column layouts, navigation bars, image galleries, entire page structures — all built on float. The reasons it worked:

• Floats are taken out of normal flow.
• Adjacent floats sit side by side until they fill the container.
• clear: both forces an element below preceding floats.

The reasons it was terrible for layout:

• The parent collapsed to zero height because its children were out of flow ("clearfix" hacks fixed this).
• Vertical alignment was impossible.
• Equal-height columns required JavaScript or table-display tricks.
• Source order had to match visual order — no way to reorder.
• Centering with floats required negative-margin hacks.

Where Float Is Still Right

Wrapping a paragraph around a small image or pull-quote. That's it.

The Clearfix: A Hack You'll Still See

Because floats removed children from flow, parents collapsed. The clearfix was an after-pseudo-element trick to force the parent to contain its floated children:

The modern equivalent is display: flow-root on the parent. One declaration, no pseudo-element. You'll see clearfix in older codebases; recognize it, don't add it.

inline-block Layouts

Around 2010, inline-block became the float alternative for grid-like layouts. The technique:

It worked, but inline-block has the inline whitespace gap problem (Lesson 2): the source whitespace between elements renders as a visible space, breaking pixel-perfect grids. Workarounds: source-comment the whitespace, set font-size: 0 on the parent, or use negative margins. All hacks. Flexbox and Grid eliminated this entirely.

display: table and table-cell

CSS lets you make any element behave as a table cell without using actual <table> markup. display: table + display: table-cell gave you:

• Vertical alignment via vertical-align: middle.
• Equal-height columns automatically.
• No clearing needed.

This was the "clever" pre-Flexbox solution to centering and equal-height layout. Now Flexbox and Grid do the same things more cleanly. You'll occasionally still see display: table-cell for vertical centering in very specific cases (single-line text in a fixed-height container) — Flexbox with align-items: center replaces this too.

The Mantra For Reading Old Code

Why You Still Need To Know This

You'll inherit codebases written in 2014. You'll read tutorials from 2013 that show float: left for layout. You'll see Bootstrap 3 still floating around in legacy projects. Understanding the legacy means you read these without confusion, and you know what to replace them with.

Tables For Tables (Not Layout)

One final point: <table> markup is for actual tabular data. Spreadsheet-style information with rows and columns. Don't use <table> for layout; that's a 1998 pattern that's wrong on every dimension (accessibility, maintainability, responsiveness). Do use <table> for actual tables — and learn the modern table CSS (border-collapse, caption, thead/tbody/tfoot, sticky headers via position: sticky).

Pippa's Note