float在css2和css3中行为完全一致，它并非css3新特性；css2.1已完整定义其取值与规则，css3仅新增flex、grid及flow-root等替代方案，其中flow-root用于创建bfc解决塌陷，但不改变float本身。
float 在 CSS2 和 CSS3 中根本没变
它不是 CSS3 新增特性，也从未被 CSS3 修改过行为。CSS2.1 就已完整定义 float 的所有取值（left、right、none、inherit）和规则：脱离文档流、影响换行、需配合 clear 或其他方式清除塌陷。CSS3 规范里压根没重写 float，也没加新值或新逻辑。
所谓“CSS3 浮动”是常见误解
实际只是有人把“用 CSS3 语法写的含 float 的页面”误称为“CSS3 浮动”。真正属于 CSS3 的布局升级是 display: flex 和 display: grid，它们从设计上就规避了 float 的固有缺陷。浏览器渲染差异（比如 IE6–8 的双倍边距 bug）属于兼容性问题，不是标准演进。
现代使用中唯一新增的关联机制是 display: flow-root
flow-root 是 CSS3 新增的 display 值，用于创建新的块级格式化上下文（BFC），从而天然解决父容器高度塌陷——这常被用来替代传统 clearfix 技巧。但它不是对 float 的升级，而是提供了一种更干净的隔离手段：
.container {
display: flow-root; /* 不再需要 ::after + clear */
}
/* 内部 float 元素仍按原规则工作，但父容器自动包含高度 */
注意：flow-root 在 Flex/Grid 容器内部对子元素的 float 无效（规范明确忽略），且 IE 完全不支持。
容易被忽略的硬限制：flex/grid 容器里设 float 没用
这是最常踩的坑——一旦父元素设了 display: flex 或 display: grid，其直接子元素上的 float 属性会被浏览器完全忽略。不是兼容性问题，是规范强制行为。想混用？只能把浮动元素再包一层普通块容器。
-
float只在常规流（normal flow）容器中生效 - Flex/Grid 是独立的布局上下文，
float对其子项无意义 - 图文环绕等局部场景仍可放心用
float，但整页结构别硬套
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
