display: flow-root 性能开销最小，因其不生成伪元素、不触发重排、不改变溢出行为，仅通过原生bfc机制包裹浮动子元素，无额外dom节点与渲染副作用。
display: flow-root 性能开销最小——它不生成伪元素、不触发重排、不改变溢出行为，仅通过 CSS 层级的 BFC 创建机制完成高度包裹，浏览器原生支持，无渲染副作用。
为什么 display: flow-root 比 ::after 伪元素更轻量
伪元素清除法（如 .clearfix::after）虽然结构干净，但每次使用都会强制浏览器创建并管理一个额外的匿名框节点，即便 content: "" 且 visibility: hidden，该节点仍参与布局计算和层叠上下文判定；而 display: flow-root 是纯 display 值切换，不新增任何 DOM 或渲染节点，也不影响 margin 折叠、z-index 分层或滚动容器行为。
- Chrome DevTools 的 Layout Shifts 和 Paint Profiling 中，
flow-root几乎不触发 layout 或 paint，::after在复杂嵌套下可能引发微小但可测的 layout cost - 当父容器本身是
position: relative或含transform时，::after可能意外触发新的层叠上下文，间接增加合成层数量 -
flow-root不依赖content声明，避免因漏写或误写content: ""导致清除失效（这是伪元素法最常踩的坑）
overflow: hidden 看似简单，实际隐性开销高
它看似只改一个属性，但会强制浏览器建立 BFC 的同时，还必须同步处理溢出裁剪逻辑：检查子元素位置、计算裁剪边界、维护滚动状态（即使没滚动条），在含大量绝对定位子项（如 tooltip、popper）的容器中，这个检查成本会随子元素数量线性上升。
- 若容器内有
position: absolute元素超出边界，overflow: hidden会触发额外的 clip-path 计算，且无法被 will-change 优化 - Safari 旧版本中，
overflow: hidden可能意外提升为合成层，导致内存占用升高 - 响应式场景下，媒体查询反复切换
overflow值，容易引发 layout thrashing
真正容易被忽略的性能点：清除浮动不是终点，而是设计信号
当你在新项目里反复评估「哪种清除方案更快」，其实已经站在了技术债边缘——float 本身不是布局工具，2026 年还在用它做栅格或导航栏，意味着你正绕过 flex-wrap 的自动换行、gap 的间距控制、justify-content 的对齐能力，这些才是现代 CSS 的性能主干道。真正的零开销，是让浮动根本不出现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
