Why has CSS float-based layout been largely replaced?

Explanation

CSS float-based layout has been largely replaced by Flexbox and Grid because floats were never designed for layout (they were for text wrapping around images). Floats required clearfix hacks, had issues with container collapsing, were difficult to vertically center, and had fragile ordering. Flexbox and Grid are purpose-built layout systems with intuitive properties, robust alignment, and no need for hacks. Floats remain valid for their original purpose (wrapping text around elements) but should not be used for page layout.