display: flow-root 是唯一不抖的现代解法，它原生创建 BFC，样式计算阶段即确定高度，动态插入浮动子项无需重排，兼容主流浏览器（Chrome 64+/Firefox 58+/Safari 15.4+/Edge 79+），IE11 需降级。
用 display: flow-root 就能稳定撑开高度，且对动态插入完全无感——它在样式计算阶段就确定容器尺寸，不依赖重排或伪元素触发时机。
为什么 overflow: hidden 在动态加载时会跳
它只在初始渲染时强制创建 BFC，后续 JS 插入新浮动子项不会重新计算高度；更麻烦的是，一旦内容宽度超限，直接裁剪，视觉上就是“闪一下”或内容突然消失。iOS Safari 和部分安卓 WebView 中，还会因 -webkit-overflow-scrolling: touch 与 BFC 触发时机竞态，导致首帧父高为 0，第二帧才撑开。
- 不能响应 DOM 变化，
innerHTML +=或append()后高度不变 - 裁剪溢出内容（如下拉菜单、tooltip、阴影），不是“看不见”，而是被硬截断
- 在 Safari 14 及更早版本中，
overflow: hidden甚至不保证触发 BFC，需额外加zoom: 1
display: flow-root 是唯一不抖的现代解法
它原生创建 BFC，不改变子元素 float 行为，也不影响 margin 合并、滚动或定位。浏览器在 layout 阶段就完成高度计算，后续插入浮动项不会引发重排。
- 兼容 Chrome 64+ / Firefox 58+ / Safari 15.4+ / Edge 79+，IE11 不支持（需降级）
- 写法极简：
.container { display: flow-root; }，无需 class 切换、无需 JS 干预 - 和
position: absolute、transform、box-shadow全部兼容，溢出内容照常显示 - 不要和
display: flex或display: grid同时用——后者已自带 BFC，叠加反而让子项退化成 block 流
动态插入浮动内容时，.clearfix 怎么用才不翻车
老项目必须兼容 IE11 或 Safari 14– 时，.clearfix::after 仍是主力，但 JS 插入后必须显式重触发重绘，否则伪元素清除可能滞后一帧。
立即学习“前端免费学习笔记（深入）”；
- 标准写法必须含
content: ""+display: table+clear: both，缺一不可 - 插入后强制重排：
el.classList.remove('clearfix'); void el.offsetWidth; el.classList.add('clearfix'); - 若父容器设了
font-size: 0（常见于 inline-block hack），记得给::after单独重置font-size: initial，否则旧引擎下撑高失效 - 避免在
@keyframes里增删clearfix类——动画期间反复重排必然卡顿
真正容易被忽略的是：浮动本身已不是首选布局方式，但只要第三方组件、图文环绕、遗留代码里还藏着 float，清除逻辑就仍得精准匹配场景——选错方案，错位只是表象，背后可能是 tooltip 裁剪、滚动锚点漂移、甚至可访问性树断裂。
