flexbox 的 flex-wrap 能自动换行，float 需手动 hack：flex-wrap: wrap 在空间不足时主动折行且保持对齐逻辑；float 无原生换行控制，必须依赖媒体查询 + float: none + 清除浮动三重补丁，漏一则导致错行、重叠或截断。
Flexbox 的 flex-wrap 能自动换行，Float 需手动 hack
响应式断点变化时，flex-wrap: wrap 会主动让子项在空间不足时折行，且不破坏对齐逻辑；而 float 没有原生换行控制，必须靠媒体查询 + float: none + 清除浮动三重补丁，漏一条就掉行错位。
常见错误现象：float: left 的三栏在小屏下强行挤在一行、文字被截断、最后一项被推到下一行但间隙错乱。
- Flex 下只需统一设
flex-wrap: wrap，再用flex: 1或flex-basis控制单个宽度 - Float 下要为每个断点写
@media (max-width: 768px) { .item { float: none; width: 100%; } }，还要额外加.clearfix -
flex-wrap在 IE11 中可用，但gap不支持，需用margin替代
justify-content 和 align-items 让对齐逻辑集中可控
Float 布局中，水平居中得靠 margin: 0 auto（仅对块级元素有效）、右对齐得靠 float: right + margin-left: auto，垂直居中更是无解，只能用 position + transform 这类副作用强的方案。
Flex 则把对齐权收归容器：主轴对齐由 justify-content 统一声明，交叉轴由 align-items 控制，响应式切换时只需改父级样式，不碰子项。
- 移动端堆叠 → 桌面端并排？只改
flex-direction，不用动任何子项的float或width - 按钮组右对齐？
justify-content: flex-end一行解决，不用给最后一个按钮加margin-left: auto - 图标+文字垂直居中？
align-items: center天然生效；Float 下需逐个调vertical-align或包裹再定位
Flex 容器天然 BFC，避免高度塌陷与清除浮动开销
响应式页面常动态插入内容（如 JS 加载卡片），float 元素一旦新增或尺寸变化，浏览器就得重新计算所有兄弟元素的流式位置和文字绕行，低端 Android WebView 中卡顿明显；而 display: flex 容器默认建立 BFC，子项高度自动参与父容器计算，无需 clear、overflow: hidden 或伪元素。
容易踩的坑：flex 容器里混着 float: left 的子项，浏览器会先执行 float 再套 flex，导致换行失效、对齐偏移。
- 必须显式重置：
.container > * { float: none; }，不能假设它“不起作用”就留着 -
overflow: hidden在旧版 UC 浏览器中会重建裁剪边界，CPU 占用飙升，而 Flex 容器完全规避该问题 - IE11 需补
-ms-flex: 1，否则flex: 1不伸缩，但float在同一环境里仍会干扰渲染
order 属性实现 DOM 顺序与视觉顺序分离
响应式设计常需改变内容排列优先级（比如移动端把广告移到底部），float 只能靠 JS 移动 DOM 节点或冗余 HTML，而 order 属性让视觉顺序脱离 HTML 结构，纯 CSS 即可调控。
注意：order 默认值是 0，负值优先级更高；但它不改变语义顺序（对屏幕阅读器、SEO 无影响），仅控制布局位置。
- 移动端广告后置：
.ad { order: 99; }，其他内容保持order: 0 - Float 下只能靠
float: right把某项“挤到最右”，但无法真正“移到末尾”，更没法跨行调整 -
order在 IE10+ 支持良好，IE11 需加-ms-flex-order前缀
真实项目中最容易被忽略的，不是“怎么写 flex”，而是忘记重置残留的 float 和没设 flex-wrap ——这两处一漏，响应式就直接失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
