浮动布局性能极差，应全面替换为flex/grid或flow-root；动态修改float必触发重排，位移显隐须用transform/opacity；仅纯内容图文环绕可保留float。
浮动布局本身就不适合追求高性能——它不是“怎么写才快”，而是“尽量别用”。现代浏览器对 float 的优化极弱，任何动态修改（哪怕只是 float: none → float: left）都会强制重排，滚动中卡顿几乎是必然结果。
为什么改 float 会触发重排
浮动元素脱离文档流后，父容器高度塌陷，浏览器必须反复计算该元素对周围所有块级上下文的影响范围。一旦你用 JS 切换 float 值、或图片/字体加载完成导致尺寸变化、甚至只是窗口 resize，整个父容器及其后续兄弟元素都得重新布局。
- 实测：在 Chrome 中，
float+width过渡动画比transform: translateX()多消耗 3–5 倍 layout 时间 -
clear: both不是“清完就没事了”，它会让浏览器回溯整个浮动链，连带触发祖先节点重排 - 媒体查询里写
@media (min-width: 768px) { .item { float: left; } }，断点触发瞬间 layout cache 全清
替代 float 的轻量级方案：display: flow-root
如果你只是想让父容器“包住”内部浮动子项（比如老项目兼容需求），display: flow-root 是唯一推荐的清除方式——它原生创建 BFC，不裁剪 position: absolute 子元素，也不影响 overflow 行为。
- 把旧代码
.wrapper { overflow: hidden; }直接换成.wrapper { display: flow-root; } - 删掉所有无语义的
<div style="clear:both"></div>或::after清除 hack - 注意兼容性：
flow-root在 Safari 10.1+、Chrome 58+、Firefox 53+ 可用；IE 完全不支持
需要位移或显隐时，用 transform + opacity 替代 float 控制
常见错误是用 element.style.float = 'left' 实现侧边栏展开/收起，这等于每帧都在撕裂文档流。正确做法是把浮动逻辑完全剥离，只用合成层属性驱动视觉变化。
立即学习“前端免费学习笔记（深入）”；
- 侧边栏滑入：用
transform: translateX(-100%)→translateX(0)，加will-change: transform（仅限高频动画元素） - 显隐切换：用
opacity: 0+pointer-events: none，而非float: none或display: none - 绝对禁止在
@keyframes里写float、margin、width等触发布局的属性
真正该做的：用 flex 或 grid 重构浮动逻辑
浮动不是“写法问题”，是“模型错配”。图文混排、两栏布局、卡片流这些场景，display: flex 或 display: grid 不仅代码更少，浏览器也根本不用算浮动影响域。
- 两栏布局：直接
.container { display: flex; }，.sidebar { width: 200px; }，.main { flex: 1; }—— 高度自动等高，无需清除 - 响应式卡片流：用
display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))，比 float + media query 简洁且性能可控 - 若需文字环绕图片，只在
<p><img float="left" alt="如何利用CSS写出高性能的浮动布局_减少重排(Reflow)的技巧" >...</p>这类纯内容场景保留float，其他一律替换
最易被忽略的一点：性能瓶颈往往不在“怎么动”，而在“为什么还要动”。只要还依赖 float 做布局控制，你就始终在和浏览器的 layout engine 对着干——不是调优能解决的，是模型该换就得换。
