display: flow-root 性能最优且无副作用；clear: both 因需回溯浮动元素位置强制触发重排，伪元素和 overflow 虽可清除浮动但各有性能或兼容性缺陷。
display: flow-root 性能最好，且无副作用；伪元素和 overflow 都会触发重排或裁剪，应尽量避免。
为什么 clear: both 会拖慢重排
浏览器遇到 clear: both 时，必须回溯前面所有浮动元素的位置来确定“清除点”，这个过程打断渲染流水线，强制触发重排（reflow）。尤其在长列表、动态插入内容的场景下，每个新 item 带一个 clear: both，性能损耗是累加的。
-
clear: left或clear: right比clear: both稍好，但仍需回溯，不是零成本 - 伪元素（如
.clearfix::after）虽不加 DOM 节点，但伪元素仍参与盒模型计算，也会触发重排 -
overflow: hidden不是“清除”，而是靠触发 BFC 让父容器重新包含浮动子元素——但它本身不引发重排，代价是裁剪溢出
display: flow-root 是当前最优解
它专为创建无副作用的 BFC 而设，效果等同于 clearfix，但无需额外 class、伪元素或 hack。
- 写法极简：
.container { display: flow-root; } - 兼容性已足够：Chrome 64+、Firefox 58+、Safari 15.4+、Edge 79+；IE 完全不支持
- 不会裁剪
position: absolute子元素、阴影、transform 偏移内容 - 注意：
flow-root会重置 margin-collapse，相邻块级元素外边距不再合并
overflow: hidden 和 clearfix 的实际坑点
两者都还在用，但各自有明确雷区，不能混用或无脑套用。
立即学习“前端免费学习笔记（深入）”；
-
overflow: hidden在display: flex或display: grid容器中完全失效（不触发 BFC） -
overflow: hidden+width: 100vw可能意外触发横向滚动条 -
.clearfix::after必须带content: ""，否则伪元素根本不渲染 - 如果父容器本身已有
overflow: hidden，再加.clearfix可能导致伪元素被裁剪，清除失败 - 不要对已用
display: flow-root的容器重复加.clearfix，冗余且可能干扰 BFC 行为
真正容易被忽略的是：浮动本身已非布局首选，纯布局场景该用 flex/grid；只有文字环绕图片或无法重构的老系统才需要 float。而为 float 堆一堆清除代码，本质是在给过时方案续命——flow-root 是目前最轻量、语义最干净的出口，别绕弯了。
