css/no-float-layout

Dlaczego

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.

Poprawka

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.

Przykłady

/* 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; }

Źródła

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

Przeczytaj w terminalu

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