float 是 CSS2.1 定义的布局机制，CSS3 未修改其行为；现代布局应优先使用 flexbox 和 grid，float 仅适用于文本环绕等局部场景。
HTML 中的浮动样式在 CSS2 和 CSS3 中没有本质差异——CSS3 并未修改 float 的行为，它仍是 CSS2.1 定义的布局机制。所谓“CSS3 浮动样式”，是常见误解；真正替代浮动的，是 CSS3 引入的 flexbox 和 grid。
为什么说 float 不是 CSS3 新特性
CSS2.1 就已完整定义了 float（取值：left、right、none、inherit），包括其脱离文档流、影响周围块级元素换行、需要清除浮动（clear）等规则。CSS3 规范中根本没重写 float，也未新增取值或交互逻辑。
常见混淆来源：
- 某些教程把“用 CSS3 写的含
float的页面”误称为“CSS3 浮动” -
浏览器对
float的渲染在不同版本中存在细微差异（如 IE6–8 的双倍边距 bug），但这属于兼容性问题，非标准演进 -
float与新属性（如display: flow-root）配合使用变多，但flow-root是 CSS3 新增的 display 值，不是浮动本身的升级
float 在现代布局中的真实定位
它已退居为「文本环绕图片」或「简单两栏微调」的专用工具，不再是页面主布局手段。继续用 float 做整页结构，会立刻遇到这些硬伤：
立即学习“前端免费学习笔记（深入）”；
- 父容器高度塌陷必须手动
clear（::after伪元素或overflow: hidden等 hack） - 无法垂直居中、等高列、响应式断点控制天然困难
- 与
position: sticky或transform等 CSS3 特性组合时，触发层叠上下文或渲染异常 - Flex 容器子元素上设
float会被忽略（规范明确：浮动在 flex/grid 容器中无效）
该用什么替代 float 做布局
直接切换到语义清晰、控制力强的 CSS3 布局模块：
- 一维线性布局（导航栏、卡片列表）→ 用
display: flex，配justify-content/align-items - 二维网格布局（后台仪表盘、响应式图文混排）→ 用
display: grid，配grid-template-columns/grid-gap - 需要兼容老浏览器（IE10+）且不能用 JS 时 → 可保留
float，但务必加clearfix类并限制仅用于局部 - 纯文字环绕图片 →
float仍是最佳选择，简洁可靠，无需替代
示例对比：
/* 旧：float 布局两栏（需清除） */
.sidebar { float: left; width: 200px; }
.main { margin-left: 200px; } /* 手动留白，易错 */
.container::after { content: ""; display: table; clear: both; }
/ 新：flex 布局两栏（自动对齐、无塌陷） /
.container { display: flex; }
.sidebar { width: 200px; }
.main { flex: 1; }
容易被忽略的兼容性细节
即使坚持用 float，也要注意几个实际项目里常踩的坑：
-
float元素若设margin，在 IE6–7 中可能触发双倍边距（只对float: left+margin-left等方向生效） -
float与inline-block混用时，空白符会产生间隙，而flex完全无视 HTML 空格 - 移动端 Safari 对
float在transform: scale()容器内的渲染有偏移，flex无此问题 -
float不支持gap属性，而flex和grid原生支持，写间距更直观
真正要关注的不是“CSS2 和 CSS3 浮动有什么不同”，而是“我这个场景，是否还在用过时的布局思维”。浮动没变，变的是我们对布局可控性和维护成本的要求。
