display: flow-root 几乎不抖动，因为它直接让父容器建立BFC，不改变子元素float行为，也不影响overflow、margin合并或滚动，浏览器在样式计算阶段即确定容器高度，避免后续重排。
会，但抖动不是清除浮动本身引起的，而是清除方式不当或清除时机错位导致的布局重排。
display: flow-root 为什么几乎不抖
它直接让父容器建立 BFC，不改变子元素的 float 行为，也不影响 overflow、margin 合并或滚动行为。浏览器在样式计算阶段就确定了容器高度，后续内容不会因浮动元素“突然出现”而上移。
-
display: flow-root是唯一不触发重排的清除方案，兼容 Chrome 64+/Firefox 58+/Safari 15.4+ - 不要和
display: flex或display: grid混用——后者已自带 BFC，叠加flow-root会覆盖布局模式，反而让子项按 block 排列 - 若父容器已有
overflow: auto，再加flow-root不冲突，但冗余
overflow: hidden 清除浮动时抖动的真正原因
抖动常发生在 iOS Safari 或 Chrome 移动端：当容器同时设置了 overflow: hidden 和 -webkit-overflow-scrolling: touch（或现代等效的 scroll-behavior: smooth），WebKit 的滚动优化会延迟 BFC 触发时机，导致首次渲染时父高仍为 0，内容先挤上去，BFC 生效后再撑开——这就是“闪一下”。
- 这不是 bug，是渲染流水线中 layout 阶段与 scroll 优化的竞态
-
overflow: auto在部分安卓 WebView 中可能意外显示滚动条，视觉上像“抖” - 绝对不要用
overflow: hidden清除浮动的同时又放 tooltip、下拉菜单、阴影等溢出内容——裁剪即抖动源
clearfix 伪元素清除为何有时也抖
抖动往往来自两个被忽略的细节：伪元素没设 display: table（或 block），或父容器用了 font-size: 0 却没重置伪元素的字体大小。
立即学习“前端免费学习笔记（深入）”；
-
.clearfix::after必须有content: ""+display: table（或block）+clear: both，缺一不可 - 若父容器设了
font-size: 0（常见于 inline-block 布局 hack），伪元素会继承该值，display: table在某些旧引擎中可能无法正确撑高 - 动态插入浮动内容后，JS 未触发重绘（如只改 innerHTML 不 touch offsetHeight），伪元素清除可能滞后一帧
动画中清除浮动引发抖动怎么避
动画期间清除浮动，等于在每一帧都重新计算父容器高度，极易卡顿。根本原则是：动画前就完成清除，动画中只操作 transform 和 opacity。
- 不要在
@keyframes里写clear: both或动态增删clearfix类 - 如果动画目标是浮动元素本身，先用
position: relative+z-index脱离文档流，再做transform动画 - 用
will-change: transform提前声明，但动画结束必须立刻will-change: auto，否则合成层残留会拖慢后续渲染
最易被忽略的点：抖动往往不是“清除没生效”，而是清除生效得太晚——比如 Vue 组件 mounted 阶段才加 flow-root，但 DOM 已经渲染完毕；应该把清除逻辑写在初始 CSS 中，而非运行时补丁。
