css/no-float-layout

Why

Float columns need percentage widths that add up exactly, a clearfix on every row and margin tricks for gutters; they cannot align items vertically, reorder, or wrap gracefully, so they break at the widths nobody tested. Grid and flexbox have been in every browser for years and do all of it natively.

Fix

Make the container display: grid (two-dimensional layouts, card grids) or display: flex (a row or column of items) and space children with gap. Delete the clearfix; if a box only has to contain a floated image, give it display: flow-root. Keep float for an image or quote that text should wrap around.

Examples

/* bad */
.row::after { content: ""; display: table; clear: both; }
.col-6 { float: left; width: 50%; }
/* good */
.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); gap: 1rem; }

Sources

• MDN, CSS grid layout
• MDN, Floats (Learn web development, legacy layout methods)
• MDN, display (flow-root)

Read it in the terminal

npx github:dawidolko/frontend-skills explain css/no-float-layout