安卓 WebView 中 float 元素“掉行”或重叠的直接原因是低版本内核（如 Android 4.1–4.3）错误触发 hasLayout 或提前换行计算，非清除失效；overflow: hidden 在 Android 4.4 以下常因 transform 等属性不触发 BFC；float+margin 还存在双倍间距 Bug；根本解法是弃用 float，改用 flex。
安卓 WebView 中 float 元素突然“掉行”或重叠的直接原因
不是清除没写对，而是浮动元素在某些安卓 WebView（尤其是 Android 4.1–4.3 原生浏览器、部分华为/OPPO 定制内核）中，会错误触发 hasLayout 或提前计算换行边界——哪怕父容器宽度充足，只要子元素总宽 + margin 超过视口缩放后实际像素值（比如因 user-scalable=no 导致缩放因子非 1），就可能强行折行。此时 clear: both 失效，因为换行发生在渲染层，不是文档流逻辑问题。
overflow: hidden 清除浮动在安卓上为何有时失效
在 Android 4.4 以下 WebView 中，overflow: hidden 并不总能触发 BFC，尤其当父容器同时设置了 transform、will-change 或 position: relative 时，渲染引擎会跳过高度重算。这不是 bug，是早期 WebKit 的优化残留。
- 优先用经典
clearfix：给容器加.clearfix { *zoom: 1; }+:before/:after伪元素（IE6+ 兼容写法） - 避免和
transform共存：如果必须用动画，把overflow: hidden挪到更外层容器 - 测试临界宽度：用 Chrome DevTools 的 Device Mode 模拟 Android 4.3，手动调窄 viewport 看是否在某像素值突变
安卓低版本中 float + margin 的双倍间距问题
Android 4.1–4.3 的 WebKit 内核复刻了 IE6 的双倍边距 Bug：对已设 float: left 的元素再加 margin-right: 10px，实际渲染为 20px。这会导致右侧空间不足，触发意外换行，看起来像“布局错乱”。
- 修复方式：给浮动子项加
display: inline（仅低版本识别，不影响现代浏览器） - 更稳妥做法：改用
padding-right控制间距，或把 margin 移到父容器的:not(:last-child)选择器上 - 注意：
*margin-right: 5px这类 hack 在安卓 WebView 中无效，不要白费力气
真正该停用 float 布局的信号
当你开始为同一组浮动元素写三套清除方案（overflow + clearfix + clear 元素），并发现某个机型必须关掉 user-scalable 才能显示正常时，说明问题不在清除技巧，而在浮动本身与移动端视口缩放、字体放大、WebView 渲染管线的底层冲突。这时候删掉所有 float、clear、overflow: hidden，换成 display: flex，反而比调兼容性更快。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
