安卓WebView浮动闪烁的真正原因是合成层未就绪或被降级导致首帧CPU渲染，表现为空白→错位→恢复；display:flow-root在Android4.4–5.1不支持，伪元素清除需补全content:''和height:0等属性，强制GPU加速反而加剧问题，推荐改用flex布局。
安卓 WebView 浮动闪烁的真正原因不是清除没写对
浮动元素在 Android 4.4–6.0 原生 WebView 中“闪一下”，不是因为 clear 没加、overflow: hidden 没生效，而是合成层（compositing layer）未就绪或被意外降级，导致首帧回退到 CPU 渲染——视觉上就是空白→错位→恢复，像抽搐。这种现象在 Vue/React 组件挂载、动态插入浮动内容时最明显。
display: flow-root 在低版本安卓上基本不可用
display: flow-root 看起来是现代解法，但它在 Android 4.4–5.1 的 WebView 中完全不支持；Android 6.0+ Chrome 内核虽支持，但华为 EMUI 4.x、小米 MIUI 8 早期版等定制 ROM 会直接忽略该声明。实测中即使写了，getComputedStyle(container).display 可能返回 block，但容器高度仍为 0。
必须做两件事：
- UA 检测：匹配
Android 4\.4|Android 5\.1|wv就跳过flow-root - 运行时验证：用
getComputedStyle(container).display === 'flow-root'判断是否真生效（注意：旧引擎可能返回字符串却不触发 BFC）
伪元素清除浮动在安卓上容易漏掉关键声明
安卓 WebView 对 ::after 的初始化时机敏感，常因 CSSOM 解析顺序问题漏掉 content: '' 或 display: table，导致清除失效。这不是写法错误，而是渲染引擎差异。
立即学习“前端免费学习笔记（深入）”；
必须显式补全这些属性：
-
height: 0或line-height: 0（不能只靠font-size: 0） -
content: ''必须写在一行内，避免换行或注释干扰解析 - 不要依赖
visibility: hidden或opacity: 0隐藏伪元素——旧 WebView 可能因此跳过渲染
强制 GPU 加速反而让闪烁更严重
在浮动父容器上硬加 transform: translateZ(0) 或 will-change: transform，不仅不能稳定图层，还会触发图层分裂，放大 subpixel 定位误差。尤其当父容器同时有 overflow: hidden 或 backface-visibility: hidden 时，子元素的 3D transform 很可能被抑制。
真正可控的做法：
- 只对浮动父容器本身加
will-change: transform，且由 JS 在需要时动态添加、动画结束后立刻移除 - 禁用
backface-visibility: hidden（它在 Android 4.4–5.1 中反而抑制图层创建） - 避免和
filter、mask、overflow: hidden共用——这些属性会让旧 WebView 强制降级为 CPU 渲染
真正顽固的闪烁，往往不是缺某个 CSS 属性，而是浮动 + 动态插入 + 视口缩放 + 祖先 transform 四者叠加后，浏览器在 layout/paint/composite 阶段彻底失去同步节奏。这时候删掉所有 float、clear、overflow: hidden，换成 display: flex，比调兼容性更快也更稳。
