浮动不是为布局设计，而是图文环绕的副产品；现代应优先用Flexbox或Grid替代，仅在图文环绕、老IE兼容等少数场景使用。
浮动不是“CSS2.1专属”，也不是被CSS3“淘汰”了——它至今仍被浏览器完整支持，只是适用场景变了。真正区别在于：浮动是**脱离文档流的副作用式布局工具**，而CSS3的 flex 和 grid 是**专为布局设计的原生模型**。
float:left/right 为什么现在不推荐用于整体页面布局
因为它的行为本质是“图文环绕”的副产品，不是为多栏结构设计的：
-
float元素会脱标，导致父容器高度塌陷（除非手动清除），这是布局中极易漏掉的坑 - 多个浮动元素宽度之和略超容器时，最后一项会整行换位，而不是自动折行或压缩，响应式下难控制
- 无法对齐（如垂直居中、基线对齐）、无法反向排序、无法等分布局，所有这些都要靠 hack 或额外 DOM
-
clear只能作用于后续兄弟元素，不能跨层级或逆序影响，逻辑耦合强
flex 和 grid 解决了哪些 float 做不到的事
它们不是“增强版 float”，而是从底层重构了布局语义：
-
display: flex容器内子项默认沿主轴排列，justify-content和align-items直接控制对齐，无需浮动+清除 -
flex-wrap: wrap能真正实现流式折行，且可设置gap控制间距，float 没有等效能力 -
display: grid支持二维布局，用grid-template-areas可视化定义区域，float 完全无法表达这种结构 - 两者都天然支持响应式重排（
@media+flex-direction或grid-template-columns），float 需要整套 media + 重写 float 方向
float 还有什么不可替代的用途
它没死，只是退回到原始设计意图的场景里：
立即学习“前端免费学习笔记（深入）”；
- 文字环绕图片：
img { float: left; margin-right: 1rem; }—— 这仍是语义最自然的写法 - 某些老系统或邮件模板（如 Outlook）只支持有限 CSS，
float是少数能稳定实现多栏的手段 - 需要兼容 IE9–IE10 的项目（
flex支持不完整，grid完全不支持），仍得靠 float +clearfix - 极简脚本注入场景（如用户样式表覆盖），float 规则更轻量、更易预测
真正容易被忽略的是：当你在现代项目里看到 float，首先要确认它是不是在做“本不该它做的事”——比如用它撑开父容器高度，或强行模拟栅格。这些地方换成 display: flow-root 或 flex，反而更干净、更少副作用。
