推荐纯CSS清除浮动：优先用display: flow-root创建BFC；兼容旧浏览器则用.clearfix::after{content:"";display:block;clear:both}。JS清除会触发回流重绘导致FOUC，因浮动塌陷需在CSSOM阶段解决而非运行时。
直接用 display: flow-root 或伪元素 ::after + clear: both，就能在 CSS 解析阶段完成清除，不依赖 JS，首帧即稳定布局，彻底避开因 JS 动态插入清除节点或计算高度导致的重排闪烁。
为什么 JS 清除浮动会引发 FOUC 和重排
常见错误是等 DOMContentLoaded 或 window.onload 后用 JS 插入空 div、调用 getBoundingClientRect() 计算高度、或手动设 parent.style.height。这些操作都发生在 HTML/CSSOM 构建之后，浏览器已渲染初始帧——此时再改 DOM 或样式，必然触发回流（reflow）+ 重绘（repaint），造成视觉跳动。
关键点在于：浮动塌陷本身是 CSSOM 阶段就确定的问题，必须在样式解析时解决，而不是留到运行时。
- JS 插入清除元素 → 新增 DOM 节点 → 触发整个子树重排
- JS 读取
offsetHeight→ 强制同步布局计算 → 阻塞渲染流水线 - JS 修改父容器 height → 破坏原有 BFC 边界 → 后续元素位置重算
推荐方案：纯 CSS 清除，零 JS 干预
现代项目优先用 display: flow-root；需兼容 IE11 或更老环境时，用 ::after 伪元素。
立即学习“前端免费学习笔记（深入）”；
display: flow-root 是最干净的解法：它显式创建一个 BFC 容器，天然包含所有浮动子元素，且无副作用（不裁剪溢出、不隐式改变盒模型）。
.container {
display: flow-root;
}
伪元素方案仍需保留，用于兼容性兜底：
.clearfix::after {
content: "";
display: block;
clear: both;
}
注意：content: "" 不可省略，否则伪元素不生成；display: block 必须，否则 clear 无效；不需要 visibility: hidden 或 height: 0 ——现代浏览器下 content: "" + display: block 已足够轻量。
哪些“看似合理”的 CSS 方案其实有坑
overflow: hidden 和 overflow: auto 虽能触发 BFC，但风险明确：
- 弹出类组件（如
position: absolute的下拉菜单、Tooltip）超出父容器时会被裁剪 -
overflow: auto在某些滚动场景下意外添加滚动条（尤其 Safari） - 当父容器本身需要
overflow: visible实现动画或遮罩效果时，直接冲突
float: left 或 float: right 给父容器“自浮”也能包含子浮动，但会让父容器也脱离文档流——后续兄弟元素会无视它，造成新的布局断裂，属于用新 bug 换旧 bug。
真正要盯住的细节
最容易被忽略的是「清除作用域」——clear: both 只对**紧邻前一个浮动元素**生效，不是全局清空。所以伪元素必须插在浮动容器的末尾（即 ::after），不能写成 ::before；flow-root 必须设在**直接包裹浮动子元素的父级**上，跨级设置无效。
另外，如果浮动元素内部还有子浮动，且未被其父容器清除，仅在外层容器加 flow-root 是不够的——BFC 包含是单层的，嵌套浮动需逐层处理或改用 Flex/Grid。
