clear: both会放大重绘开销，因其强制浏览器O(n)回溯所有前置浮动节点以确定清除点，打断渲染流水线，将局部重排升级为整块区域重绘；现代推荐用display: flow-root创建BFC替代，它原子级隔离、不触发样式重算，且兼容主流浏览器。
为什么 clearfix 会放大重绘开销
clear: both 不是“收尾指令”，而是强制浏览器回溯前面所有浮动节点、重新确认清除位置的同步操作。它打断渲染流水线，把局部重排升级为整块区域重绘——尤其在主题切换后，若某个 .card-list 或 .post-grid 里每个 item 都带 clear: both，每次主题更新都会触发多次无谓回溯。
用 display: flow-root 替代伪元素 clearfix
现代方案直接让容器创建 BFC，天然隔离浮动影响，且不依赖内容或伪元素，主题切换时完全不参与样式计算链：
-
display: flow-root是原子级属性，不继承、不传播、不触发重排，浏览器只需更新该容器的渲染上下文 - 兼容性已覆盖 Chrome 64+、Firefox 59+、Safari 15.4+；IE11 及以下才需降级 fallback
- 避免手写
::after { content: ""; display: table; clear: both; }—— 这类规则一旦被[data-theme="dark"]选择器包裹，就会随主题切换反复重算伪元素样式
如果必须用伪元素，怎么写才不拖慢主题切换
伪元素本身不危险，危险的是它被卷入主题变量作用域或嵌套在高权重选择器中。安全写法要满足三个条件：
- 声明在
:root外独立规则里，例如.clearfix::after { ... }，不加[data-theme]前缀 - 不引用任何 CSS 变量，比如避免
background-color: var(--border-color)—— 否则每次style.setProperty('--border-color')都会让所有.clearfix节点重算 - 用 PostCSS 插件（如
postcss-clearfix）自动生成，而非手动复制粘贴；确保生成代码不含 calc()、var() 或媒体查询嵌套
主题切换时如何验证 clearfix 是否被误伤
打开 DevTools → Elements 面板 → 点击任意用了 clearfix 的元素 → Styles 标签页 → 搜索 clear 或 ::after，确认两点：
立即学习“前端免费学习笔记（深入）”；
- 该伪元素的 computed styles 中
content值是""，且未被标记为 “inherited from [data-theme=...]” - Performance 面板录制一次主题切换，过滤出
Recalculate Style事件，检查调用栈里是否出现clearfix相关规则名 —— 如果有，说明它正被主题变量间接绑定
--* 变量，就不会成为主题切换时的性能拖累。 
