float在移动端未失效而是设计用途错配，其图文环绕机制与动态视口冲突导致掉行、飘走、塌陷；应优先用flex/grid替代，但需检查JS中对浮动位置/高度的隐式依赖。
float 在移动端不是“失效”，是它根本没被设计来干这个事——直接切到 display: flex 或 display: grid 是最省力、最稳的解法。
float 在 iOS/安卓上“掉行”“飘走”“高度塌陷”的真实原因
float 的原始定位是图文环绕（比如文字绕着图片排版），不是做响应式栅格。它依赖固定宽度、无视视口缩放、对 box-sizing 和字体缩放极其敏感。iPhone 开启「更大字体」、安卓 WebView 触发硬件加速、甚至 1px 的 layout width 计算误差，都可能让 float: left 的按钮突然换行，或父容器的 offsetHeight 变成 0。
常见现象包括：float: right 的关闭图标跑到上一行；clear: both 在微信 X5 内核里完全不生效；开发者工具里子元素明明渲染了，但点击区域为空。
这不是你 CSS 写错了，是 float 的底层机制和移动端动态视口存在不可调和的冲突。
立即学习“前端免费学习笔记（深入）”；
用 display: flex 替换 float 的三步实操（不改 HTML）
老项目迁移成本低，兼容性覆盖 iOS Safari 9+、Chrome for Android 4.4+、微信 X5 内核 6.8+：
- 删掉原父容器所有浮动相关声明：
float、clear、overflow: hidden（那个“清除 hack”可以全删） - 给该父容器加上：
display: flex（默认flex-direction: row，行为和float: left一致） - 子元素去掉
float，用 flex 原生属性控制对齐：align-items: center替代垂直居中，justify-content: space-between替代左右撑开
示例：
.nav { display: flex; align-items: center; }
.nav-item { flex: none; }/* 防止被压缩，比 float:left 更可控 */哪些情况不能无脑替换？重点检查 JS 逻辑
语法能换，业务逻辑未必兼容。真正卡住的往往不是 CSS，而是藏在 JS 里的隐式依赖：
- 文字环绕图片（
float: lefton<img>）——flex不支持环绕，保留float或评估shape-outside（但 iOS Safari 12.2+ 才支持） - 用
offsetTop/getBoundingClientRect()读取浮动后位置做判断的 JS 代码——flex下坐标会变，必须重测 - 靠
float脱离文档流来辅助绝对定位的元素——flex子项默认不脱离流，得手动加position: absolute并重算top/left - 老项目用了大量
::after清除浮动，同时 JS 又监听了resize去动态重排——这些清除代码可删，但 JS 里基于“清除后高度”做的逻辑要同步改
别再用 overflow: hidden 硬清浮动
它虽能触发 BFC 让父容器包含浮动子项，但副作用明显：
- 会裁剪
position: absolute子元素（如下拉菜单、弹层） - 会隐藏
box-shadow和transform溢出内容 - 在某些安卓 WebView 中，配合
will-change或硬件加速时，::after清除可能直接失效
更干净的替代是 display: flow-root（现代浏览器全覆盖，Chrome 64+/Firefox 58+/Safari 15.4+），语义明确、无溢出裁剪副作用。
真正需要警惕的，从来不是“怎么写 CSS”，而是那些靠浮动位置、高度、顺序做判断的 JS 逻辑——它们不会随样式一并迁移，得一个个重验。
