移动端清除浮动前应先判断是否真需浮动，现代布局应优先使用flex或grid；若必须用float，则推荐display: flow-root或clearfix::after{content:"";display:table;clear:both}。
移动端清除浮动必须先判断是否真需要浮动
绝大多数移动端多列布局根本不需要 float。现代浏览器对 display: flex 和 display: grid 的支持已全覆盖（包括 iOS Safari 10.3+、Android Chrome 57+），它们天然避免高度塌陷，也无需清除逻辑。如果你正在写新项目却还在用 float: left 排两栏商品卡片或图文列表，那第一步不是找清除方法，而是改用 flex —— 否则后续所有“清除”动作都是在给技术债打补丁。
如果必须用 float，优先用 display: flow-root 而非 overflow: hidden
overflow: hidden 在移动端极易引发意外截断：iOS Safari 对 overflow: hidden 容器内的 position: fixed 元素（比如吸顶导航）有兼容问题；Android WebView 中滚动卡顿也常与此有关。而 display: flow-root 是标准的 BFC 触发方式，无副作用，且明确语义——“这个容器要独立参与块级格式化”。
实操建议：
- 给浮动容器加
display: flow-root，一行解决，不需伪元素、不污染 HTML - 兼容性兜底只需加一行
display: -webkit-flow-root（Safari 10.1–11.0） - 避免在父容器上同时设
overflow: auto和touch-action: pan-y，否则 iOS 可能禁用垂直滚动
伪元素清除法（::after）在移动端要防 height: 0 失效
老式 .clearfix::after 写法中常带 height: 0 或 font-size: 0，但在部分 Android 低版本 WebView（如 4.4.x）里，height: 0 可能被忽略，导致清除失败。更稳妥的是用 display: table 或 clear: both 配合 content: "" 即可生效，无需隐藏尺寸。
推荐写法：
.clearfix::after {
content: "";
display: table;
clear: both;
}
注意：display: table 比 display: block 更可靠，它强制生成匿名 box，清除行为更稳定；不要加 visibility: hidden 或 line-height: 0，移动端渲染引擎对此类 hack 支持不一。
清除失败时，先检查浮动元素是否被 transform 或 will-change 干扰
移动端为实现动画常加 transform: translateZ(0) 或 will-change: transform，但这会创建新的层叠上下文和局部 BFC，导致父容器无法正确包含浮动子元素——即使你加了 clearfix，高度仍可能塌陷。
排查要点：
- 临时移除所有
transform/will-change，看清除是否恢复 - 若必须保留动画优化，把
transform移到子元素上，而非浮动容器本身 - 避免在浮动容器上同时使用
backface-visibility: hidden和float，某些 Android 6.0 系统会直接忽略清除逻辑
真正难的不是选哪个清除方法，而是判断“这里到底该不该用 float”。文字环绕图片？必须用。三列等宽商品网格？别硬扛，grid-template-columns: repeat(3, 1fr) 一行搞定。浮动不是布局工具箱里的万能锤，它是特定场景下的专用螺丝刀——用错地方，拧得越用力，越容易滑丝。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
