浮动不是为布局设计，而是图文环绕的副产品；现代应优先用flexbox或grid替代，仅在图文环绕、老ie兼容等少数场景使用。

浮动不是“CSS2.1专属”，也不是被CSS3“淘汰”了——它至今仍被浏览器完整支持，只是适用场景变了。真正区别在于：浮动是**脱离文档流的副作用式布局工具**，而CSS3的 flex 和 grid 是**专为布局设计的原生模型**。

float:left/right 为什么现在不推荐用于整体页面布局

因为它的行为本质是“图文环绕”的副产品，不是为多栏结构设计的：

• float 元素会脱标，导致父容器高度塌陷（除非手动清除），这是布局中极易漏掉的坑
• 多个浮动元素宽度之和略超容器时，最后一项会整行换位，而不是自动折行或压缩，响应式下难控制
• 无法对齐（如垂直居中、基线对齐）、无法反向排序、无法等分布局，所有这些都要靠 hack 或额外 DOM
• clear 只能作用于后续兄弟元素，不能跨层级或逆序影响，逻辑耦合强

flex 和 grid 解决了哪些 float 做不到的事

它们不是“增强版 float”，而是从底层重构了布局语义：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 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，反而更干净、更少副作用。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！