现代css框架放弃float清除支持，因flex/grid已取代float布局；clear属性在flex/grid容器中被规范忽略，tailwind、bootstrap 5等主动移除clearfix类，属设计决策而非技术限制。
CSS2 的 float 在现代浏览器中仍然可用，不是因为它是推荐方案，而是因为它被规范明确保留为“向后兼容的渲染行为”——浏览器必须支持它，否则会破坏海量存量网页。
float 未被移除，是 CSS 规范的兼容性承诺
CSS 2.1 规范将 float 定义为标准属性，后续的 CSS Display Module Level 3 明确将其降级为“仅影响文本环绕和行内格式化上下文”，但**不废弃**。所有现代浏览器（Chrome 120+、Firefox 125+、Safari 17+）仍完整解析 float: left 和 float: right，只是在 Flexbox 或 Grid 容器内会静默忽略——这不是 bug，是规范要求的行为。
-
float在非 Flex/Grid 容器中照常工作：脱离文档流、触发 BFC、影响兄弟元素环绕 - 在
display: flex或display: grid父容器里写float，浏览器直接丢弃该声明，不报错也不生效 - IE6–IE11 的旧代码（如 CMS 输出的富文本）依赖
float实现图文混排，现代浏览器必须渲染一致，否则内容错乱
现代浏览器对 float 的处理已高度标准化，但细节仍有差异
主流浏览器对 float 的核心逻辑（脱离流、堆叠方向、清除机制）已无分歧，但边界场景仍存在微小差异：
- Firefox 在容器宽度临界时可能提前换行（尤其嵌套浮动 +
width: calc()），加min-width: 0或改用display: inline-block可绕过 - Safari 14.x 对
float+ 相邻 margin 合并较保守，margin-bottom可能不与下一个浮动块合并，升级到 Safari 15.4+ 后修复 - 所有浏览器均不支持
float: bottom或float: top，这些值非法，会被忽略而非 fallback 到none
你写 float 时，浏览器到底在做什么
现代浏览器执行 float 不再是“布局引擎硬编码”，而是走一套标准化的格式化上下文（FC）流程：
- 遇到
float: left，先判断父容器是否建立新 BFC（如overflow: hidden、display: flow-root）；若否，则该浮动元素参与当前 FC 的行盒（line box）布局 - 文字环绕逻辑由行内格式化上下文（IFC）处理，与图片尺寸、
line-height、vertical-align耦合紧密——这也是为什么img浮动后下方留白，常需display: block或font-size: 0 - 清除浮动（
clear: both）本质是强制生成一个“清除区”，阻止后续块盒进入浮动元素占据的垂直空间，这个逻辑在所有浏览器中完全一致
真正容易被忽略的是：哪怕只在一个 <aside></aside> 里用一次 float，只要它的父容器没触发 BFC，塌陷就会发生——而这种问题在移动端断点切换时往往只在真机上暴露，开发工具模拟器未必能复现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
