float 在移动端已不该用——它未被设计用于整体布局，会触发怪异盒模型、清除成本高、与 flex/grid 交叉行为不可预测；ios 和 android webview 表现不一致，存在高度计算丢失、溢出隐藏失效、rtl 解析错误及逻辑属性缺失等问题；flex 和 grid 是更可靠替代方案。
float 在现代移动端已基本不可靠，不是“慎用”，而是“不该用”——它从未被设计用于页面整体布局，强行使用会触发怪异盒模型、清除浮动成本高、与 flex/grid 交叉时行为不可预测。
为什么 float 在 iOS 和 Android WebView 中表现不一致
Android 4.4+ 的 WebView（基于 Chromium）对 float 的处理接近桌面 Chrome，但 iOS 12–15 的 UIWebView/WKWebView 在遇到 float + zoom 或 transform 时，可能丢失父容器高度计算；更常见的是，当父元素设了 overflow: hidden 清浮动，却同时用了 will-change: transform，iOS Safari 会跳过重排，导致内容溢出不可见。
- 安卓低版本 WebView（如 4.1）对
float: right在 RTL 文本中解析错误，文字顺序错乱 - iOS 16+ 虽修复了多数问题，但
float与contain: layout共存时仍会忽略 containment 边界 - 所有主流移动端浏览器都不支持
float: inline-start等逻辑属性，只能写left/right，无法响应书写方向变化
flexbox 替代 float 布局的三个关键转换点
把老式 float: left 导航栏或两栏布局改用 display: flex，不能只换容器属性，必须同步调整子项行为：
- 原
float: left的块级元素需移除float，并在父容器加display: flex和flex-direction: row - 原靠
margin-right隔开的浮动项，应改用gap（注意：iOS 14.5+ 才支持gap，旧版需用margin+:not(:last-child)） - 原用
clear: both的“清浮”元素，直接删掉，flex 容器天然不塌陷；若需换行，改用flex-wrap: wrap+flex-basis控制断点
示例：两栏左图右文布局
.card {
display: flex;
align-items: flex-start; /* 替代 float 对齐效果 */
}
.card img {
flex: 0 0 80px; /* 不伸缩、不压缩、固定宽 */
margin-right: 12px;
}
.card .content {
flex: 1; /* 剩余空间自适应 */
}
grid 布局在响应式卡片流中的实际落地条件
用 display: grid 替代 float 实现瀑布流或等宽卡片，关键不在语法，而在兼容性兜底和内容适配逻辑：
- iOS 10.3+、Android Chrome 57+ 支持原生
grid，但grid-template-areas在 Safari 15.4 之前不支持命名区域自动换行 - 避免依赖
grid-auto-flow: dense做动态填充——iOS 15.6 有概率导致重绘卡顿，尤其配合position: sticky时 - 真·响应式卡片网格推荐写法：
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))，并为图片加max-width: 100%和height: auto，否则在 viewport 缩放时会拉伸失真
真正麻烦的不是语法迁移，而是那些隐藏在 float 后面的隐式依赖：比如靠浮动撑开父高来实现背景色延展，或用 float + margin 模拟 gap 却没考虑缩放后像素对齐。这些细节一旦漏掉，光换 display 属性根本救不回来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
