浮动在css2.1与css3中行为完全一致，未被修改或升级；它仍是脱离文档流的图文环绕机制，在flex/grid容器中被规范静默忽略，仅在常规流容器中生效。
没有本质区别——float 在 CSS2.1 和 CSS3 中的行为完全一致，它既不是 CSS3 新增的特性，也没有被 CSS3 修改或“升级”。所谓“CSS3 中的浮动规则”，其实是误读；浮动仍是那个 CSS2.1 定义的、脱离文档流的定位机制。
float 在现代浏览器里为什么还能用，但又不推荐用于布局
因为它是向后兼容的渲染行为，不是设计缺陷，也不是临时补丁：所有主流浏览器（Chrome 120+、Firefox 125+、Safari 17+）仍完整支持 float: left 和 float: right，但仅限于常规流（display: block 或 display: inline-block 等）容器中生效。
- 在
display: flex或display: grid容器内写float，浏览器会静默忽略，不报错也不触发任何效果——这是 CSS Display Module Level 3 规范明确要求的 -
clear属性在 flex/grid 容器中同样被规范忽略，不是 bug，是设计使然 - 如果你在现代项目里看到父容器用了
float布局，大概率是没触发 BFC，导致高度塌陷；而这个问题在移动端真机上才容易暴露，开发工具模拟器常不复现
float:left 和 float:right 的实际限制有哪些
它的能力边界非常清晰，不是“不够强”，而是根本没打算干那些事：
- 无法控制垂直对齐：
align-items这类概念在浮动模型里不存在，vertical-align只对行内上下文有效，且极易受line-height和字体度量干扰 - 换行逻辑不可控：当多个
float: left元素总宽度略超容器时，最后一项会整行下移，而不是像flex-wrap: wrap那样智能折行 +gap分隔 - 无法反向排序：没有类似
flex-direction: row-reverse的等效写法，只能靠 DOM 顺序硬调 -
float: bottom或float: top是非法值，所有浏览器都会直接忽略，不会 fallback 到none
什么时候还必须用 float
不是“能用”，而是“只有它最自然”：
- 文字环绕图片：
img { float: left; margin-right: 1rem; }—— 这仍是语义最准确、兼容性最稳的写法，shape-outside虽新但支持弱、控制粒度粗 - 老系统或邮件模板（如 Outlook）：它们只认有限 CSS，
float是少数能稳定实现多栏的手段 - 需兼容 IE9–IE10 的项目：此时
flex支持不全，grid完全不可用，float + clearfix是唯一可行路径 - 极简用户样式注入场景：比如油猴脚本覆盖某页面布局，
float规则更轻量、副作用更可预测
真正容易被忽略的是：当你在审查元素时看到一个 float 声明，第一反应不该是“怎么让它居中”，而应问——它是不是正在做图文环绕以外的事？比如撑开父容器高度、模拟栅格、强行对齐。这些地方换成 display: flow-root 或 display: flex，往往一行代码就解决，且无塌陷、无换行错位、无清除依赖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
