移动端不该用float做布局，因其专为图文环绕设计，依赖固定宽度、无视缩放、对字体和box-sizing敏感，易致掉行、飘走、点击失效；应改用flex三步迁移：删浮动声明、加display: flex、用flex属性替代对齐，并检查js隐式依赖。
别费劲保证——float 在移动端本就不该用来做布局，强行“保证体验”只会掩盖问题，最终卡在点击无响应、掉行、高度塌陷这些不可预测的坑里。
为什么 float 在 iOS 和 Android 上总“掉行”或“飘走”
float 的底层机制是图文环绕，不是栅格排版。它依赖固定宽度、无视视口缩放、对 font-size 变化和 box-sizing 极其敏感：
- iPhone 开启「更大字体」后，文字撑开导致
float: left元素宽度溢出，直接换行 - 安卓 WebView 4.4+ 对
float+inline-block混用存在渲染错位 bug -
clear: both在微信 X5 内核（6.8+）里常失效，父容器高度算不出来 - 浮动元素渲染坐标偏移，但触摸热区没同步扩展，开发者工具里能看到元素，却点不中
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替代左右撑开，flex: none防止图标被压缩
示例：两栏左图右文
.card { display: flex; align-items: flex-start; }
.card img { flex: 0 0 80px; margin-right: 12px; }
.card .content { flex: 1; }
哪些地方 JS 逻辑会悄悄崩掉
语法能换，业务逻辑未必兼容。真正卡住的往往不是 CSS，而是 JS 里那些没明说的隐式假设：
- JS 若读取了
getBoundingClientRect()或offsetLeft，这些值在float下和flex下可能不同，必须重测 - 靠
float脱离文档流来辅助绝对定位的元素——flex子项默认不脱离流，得手动加position: absolute并重算top/left - 老项目用了大量
::after清除浮动，同时 JS 又监听resize去动态重排——这些清除代码可删，但 JS 里基于“清除后高度”做的逻辑要同步改 - 子项还带
float声明？浏览器会优先执行float，再套flex，结果不可控
最常被忽略的一点：float 时浏览器从不报错，但表现就是不对——你调 margin、加 zoom、塞 min-width，都是在和底层机制对抗。真正的解法不是“适配”，而是换掉它。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
