Flexbox是移动端布局事实标准，float仅在新闻图文绕排、HTML邮件、极老系统等三类不可替代场景保留；混用时须严防子项float与flex容器冲突。
移动端开发中，flexbox 是当前事实标准，float 仅在极少数遗留或特殊场景下保留——不是“能不能用”，而是“值不值得为它妥协现代体验”。
移动端浏览器对 float 和 flexbox 的实际支持底线
所有主流移动端浏览器（iOS Safari 9+、Chrome for Android 4.4+、微信 X5 内核 6.8+）都完整支持 display: flex 及基础属性（justify-content、align-items、flex-wrap）。但要注意两个真实断层：
- iOS 8 及更早版本不支持
flex-wrap: wrap，若必须兼容，得用媒体查询降级为display: block+width控制 - Android 4.3 原生 WebView 会忽略
flex: 1，建议显式写flex: 1 1 auto或加min-width: 0防止子项溢出容器
float 虽然兼容性看似更好（连 IE6 都支持），但在移动端反而更危险：老安卓 WebView 对 float + inline-block 混用支持不稳定，且文字环绕类浮动在高 DPI 屏上常出现像素级错位。
哪些 float 场景真不能被 flexbox 替代
别被“flex 万能论”带偏。以下三类情况，float 不是过时，而是不可替代：
- 新闻正文中的
img { float: left; shape-outside: circle(50%); }——flexbox无法实现流式文本自然绕行，这是 CSS 原生唯一方案 - 邮件模板（HTML email）：Outlook Desktop 等客户端几乎不支持
flex，float+table仍是交付底线 - 维护一个仍需跑在 iOS 7 或 Android 4.0 原生浏览器的老系统（极少见，但确实存在），此时改
flex可能引入更多 polyfill 和运行时判断
其余所有布局需求——导航栏、卡片列表、表单行、侧边栏+主内容——flexbox 不仅能替代，而且更稳。
为什么用 float 做响应式布局在移动端特别容易翻车
浮动本身不响应视口变化，靠的是人工写一堆媒体查询 + 重置 float + 清除逻辑，稍有遗漏就塌陷或错行：
- 小屏下忘记取消
float: left，多个模块堆成一列却因未clear而相互覆盖 - 父容器高度塌陷后，背景色、边框、阴影全部消失，调试时第一反应常是“CSS 没生效”，实则是浮动未清除
- 触摸目标（如按钮）因浮动偏移位置，又没设足够
padding或min-width，手指点击直接失效
而 flexbox 用 flex-direction: column 切换方向，flex-wrap: wrap 自动折行，所有对齐、间距、等高都由容器统一控制——没有“漏掉清除”的概念。
混用 float 和 flexbox 时最常踩的坑
过渡期难免共存，但边界必须划清：
- 别在
display: flex容器里给子元素设float：浏览器会先处理float再排flex，结果不可预测，且 W3C 明确说明该行为未定义 - 浮动区块后面紧跟
flex容器时，必须隔离：前面的浮动可能影响后续flex容器的定位，加overflow: hidden或::after { clear: both }才稳 -
flex子项若含图文混排内容（如img+ 文字），保留其内部float没问题，但别让它“逃出”容器去影响外部布局流
真正卡住的往往不是样式写法，而是 JS 里那些依赖 offsetTop、getBoundingClientRect() 等基于浮动位置做的判断逻辑——这些不会随 CSS 切换自动更新，得逐个检查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
