CSS浮动在现代开发中的角色，为何逐渐被Flexbox和Grid布局所替代？

本文共计770个文字，预计阅读时间需要4分钟。

在编写新项目时，不应直接使用现有的布局决策树顶端的`float`。它未被移除，浏览器也完全支持，但其可用性和必要性是两个不同的问题。真正需要它的时刻极少：

常见错误现象：float 一上，父容器高度塌陷、兄弟元素错位、响应式断点失效、外边距合并失控……这些问题不是“调一下就能好”，而是模型层面的副作用。它本质是让元素“假装不存在”，而现代布局要的是“真实参与计算”。

Flexbox 为什么一上来就替代了 float 的主力位置

因为 display: flex 解决了浮动最让人头疼的三个硬伤：文档流丢失、清除浮动（clearfix）的补丁式写法、以及对齐逻辑反直觉。