flex布局在低端设备上通常比float更快，因其主轴计算更高效且浏览器优化成熟；但若滥用flex-wrap、未设min-width:0或依赖stretch对齐，则可能因强制换行或反复测量导致卡顿。
Flex 布局在低端设备上真比 Float 慢吗？
不慢，反而通常更快——但前提是别乱用。Float 触发频繁的重排（reflow），尤其当内容动态增减、或配合 clear 伪元素时；而 Flex 容器只在 flex 项尺寸/顺序变化时做一次主轴计算，浏览器优化更成熟。不过，如果滥用 flex-wrap: wrap + 大量子项 + 未设 min-width: 0，文本撑宽导致强制换行计算，低端 Android WebView 或旧版 Safari 就可能卡顿。
低端设备上 Float 的隐藏性能陷阱
很多人以为 float “简单所以快”，实际在低端设备上它更易出问题：
-
overflow: hidden清除浮动会触发额外的层叠上下文和裁剪边界计算，某些 Android 4.4 内核 WebView 里会导致滚动掉帧 - 浮动元素+
position: relative+ 动画时，浏览器常误判为需持续重排，即使只是改opacity - 多个浮动块并列时，每新增一个都要重新计算所有兄弟的流式位置，JS 插入节点后容易卡住 300ms+
- 没写
.clearfix::after { display: table; }而只用display: block，部分 UC 浏览器会反复尝试重建 BFC，CPU 占用飙升
Flex 在低端设备必须加的三行保命 CSS
不是加了 display: flex 就高枕无忧。以下三行能避开 90% 的低端渲染异常：
-
flex-wrap: wrap：不写这句，子项宁可横向溢出也不换行，低端屏直接白屏或假死 -
align-items: flex-start：默认stretch会拉伸所有子项高度，若某项含长文本且未设min-height，渲染引擎要反复测量，拖慢首屏 -
min-width: 0在容器上：防止内部img或长单词把 flex 容器无限撑宽，避免触发横向滚动条和重绘
什么情况下 Float 反而更适合低端设备？
只有两种真实场景，其他都是错觉：
- 纯静态图文混排，比如新闻详情页中
img { float: left; width: 30%; }+ 段落自动环绕——此时无 JS 干预、无响应式切换、无动画，float 渲染路径最短，比套一层 flex 容器还省资源 - 超老嵌入式设备（如部分国产机顶盒 WebKit 内核），连
display: flex都解析失败，只能靠 float +width+margin硬排，这时“兼容性”就是性能本身
真正容易被忽略的是：低端设备的内存比 CPU 更紧张。Flex 的弹性计算虽快，但每个 flex 项会多持有一个 layout 对象；而 float 元素一旦定位完成，后续 scroll 几乎不触发新 layout——所以卡片流页面若每页 50+ 项，用 float（配合 will-change: transform）有时确实更稳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
