移动端布局不应使用CSS float，因其专为文字环绕设计，易导致塌陷、错位、兼容性差等问题；flex/grid容器中float与clear均失效；应改用flex、text-align、gap等现代方案。
浮动在现代移动端布局中基本不该用
CSS float 是为文字环绕图片设计的，不是布局工具。在移动端，float 会触发怪异行为：父容器高度塌陷、元素错位、缩放后换行异常，且与视口单位（vw、rem）或弹性布局混用时兼容性差。iOS Safari 15+ 和 Android Chrome 虽支持，但 float 的块级流破坏机制与响应式断点逻辑天然冲突。
清除浮动的 clear 在 flex/grid 容器里完全失效
当父容器设了 display: flex 或 display: grid，子元素即使设置了 float: left，clear 属性也会被忽略——因为 flex/grid 已接管排列逻辑，浮动脱离文档流的规则被绕过。此时写 clear: both 不仅无效，还会让开发者误以为“清除了”，实际布局早已失控。
- 检查父容器是否用了
display: flex或display: grid，是则立刻放弃float+clear - 若必须兼容老代码，可临时加
display: block回退，但不推荐 -
::after伪元素清除法（如.clearfix::after）在 flex 容器内同样无意义
移动端真正需要的是替代方案而非“修复”浮动
用 float 做两栏布局？直接改用 display: flex；想让图片右对齐文字？用 text-align: right 或 margin-left: auto；要等高卡片？align-items: stretch 更可靠。这些方案原生响应，无需媒体查询干预，也不依赖清除技巧。
.card-list {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
<p>.card {
flex: 1 1 calc(50% - 0.5rem); /<em> 移动端双列，自动适配 </em>/
min-width: 280px; /<em> 防止过窄 </em>/
}注意：flex-basis 中的百分比基于父容器宽度，不是视口，所以不会因横屏/竖屏切换突然崩坏。
立即学习“前端免费学习笔记（深入）”；
如果旧项目真绕不开浮动，至少禁用缩放干扰
某些安卓 WebView 或低版本 iOS 会在用户双指缩放时重排浮动元素，导致 clear 失效。这不是 CSS 问题，而是渲染引擎 bug。临时缓解方式：
- 在
<meta name="viewport">中加上user-scalable=no（仅限特定场景，影响可访问性） - 给浮动容器加
transform: translateZ(0)强制硬件加速，减少重绘抖动 - 避免对浮动元素同时设置
width和max-width，移动端计算优先级易出错
真正难处理的从来不是怎么清除浮动，而是说服团队别再把 float 当布局主力——它在移动端没有未来，也没有必要。
