根本原因是浮动元素脱离文档流后，浏览器必须为每次dom变更、resize或:hover反复计算其边界与文字环绕范围，且无法缓存，导致重排停不下来；clear: both会o(n)回溯同级浮动元素，将局部变更升级为整块重排。
频繁使用 float 会直接拖垮滚动和交互响应，不是“有点慢”，而是主线程反复卡死——根本原因在于浏览器必须为每次 DOM 变更、resize、甚至 :hover 重新计算浮动链的全部边界与文字环绕范围，且这些计算无法缓存。
为什么 float 多了就卡：重排停不下来
浮动元素脱离文档流后，浏览器无法跳过它的影响域。只要它存在，后续非浮动兄弟元素（比如段落、img、position: relative 容器）的定位起点、文字换行断点、父容器的 containing block 都得动态重算。
- DevTools > Rendering > Layout Shift Regions 高频闪烁，单次 Layout 耗时持续 >16ms
- 滚动加载新卡片时，每加一个
clear: both就触发整块重排，不是局部更新 - 三层嵌套浮动（如
.card → .card-header → .tag）下，getComputedStyle调用耗时飙升至 8ms+（Android 5.1 WebView 实测）
clear: both 是性能放大器，不是解决方案
clear: both 本身不消耗资源，但它强制浏览器从当前元素往前 O(n) 扫描所有同级浮动兄弟，确认“清除点”位置。这个过程打断渲染流水线，把本可局部处理的变更升级为全区域重排。
- 错误写法：
div.item { float: left; clear: both; }—— 对自身无效，且让每个 item 都触发一次回溯 - 在循环生成的列表项里重复加
clear: both，新增一项 = 重排全部已有项 - 用
overflow: hidden触发 BFC，却意外裁剪position: absolute的下拉菜单或 tooltip
现代替代方案怎么选：按场景和兼容性落地
迁移不是改个属性就行，关键看你要解决什么问题、跑在什么环境：
- 横向排列（导航栏、卡片流）：用
display: flex; flex-wrap: wrap;，宽度固定 + 自动换行，彻底告别float: left和clear - 网格类布局（相册、侧边栏+主内容）：用
display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))，计算可缓存，无清除逻辑 - 老项目兜底（需兼容 IE11）：伪元素
.clearfix::after { content: ""; display: table; clear: both; }，display: table是关键，block不触发 BFC - 最轻量替换（Chrome 64+/Firefox 59+/Safari 15.4+）：
.container { display: flow-root; }，不裁剪、不塌陷、无副作用
真正难的不是“知道该换”，而是识别哪些地方还在隐式依赖浮动上下文——比如 JS 动态切换 float: none 控制显隐、或动画中混用 transform 和 float。这些地方不清理，换再新的布局方式也白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
