Flexbox 替代 Float 可显著降低多列布局维护难度，因其原生支持对齐、换行、伸缩及视觉顺序调整，避免浮动导致的塌陷、清除、顺序依赖等问题。
用 Flexbox 替代 Float 做多列布局，能显著降低维护难度——因为 Flexbox 是为一维布局设计的原生方案，天然支持对齐、换行、响应式伸缩，而 Float 本质是文本环绕工具，强行用于布局会导致清除浮动、高度塌陷、顺序依赖等问题，越改越脆。
用 display: flex 替代 float: left/right
把父容器设为 display: flex，子项自动水平排列，无需设置浮动和清除。子项也不再脱离文档流，父容器高度自动包裹内容，避免了 float 常见的塌陷问题。
- 旧写法（易出错）：
.wrap { overflow: hidden; } .col { float: left; width: 33.33%; } - 新写法（简洁稳定）：
.wrap { display: flex; } .col { flex: 1; }或指定宽度如flex: 0 0 33.33%;
用 justify-content 和 align-items 控制对齐
Float 完全无法控制主轴/交叉轴对齐，只能靠 margin、padding 硬调，一改就乱。Flexbox 提供语义化对齐属性：
-
justify-content: space-between;—— 列间等距，首尾贴边 -
align-items: center;—— 所有列等高且垂直居中（float 下需 hack 或 JS） -
justify-content: center;—— 整体居中排布，响应式更自然
用 flex-wrap 支持响应式折行
当列数超出容器宽度时，float 布局会挤到下一行但顺序错乱、间距失控；Flexbox 只需加 flex-wrap: wrap;，子项自动换行，且仍保持 flex 属性生效：
立即学习“前端免费学习笔记（深入）”；
- 配合
flex: 1 1 250px;，每项最小宽 250px，窄屏下自动变为两列或单列 - 无需媒体查询就能实现基础响应，大幅减少断点代码量
用 order 属性灵活调整视觉顺序
Float 布局中，HTML 结构即渲染顺序，想换位置只能改 HTML 或用负 margin，影响语义和可访问性。Flexbox 的 order 属性可在不改动结构的前提下重排视觉流：
-
.main { order: 2; }、.sidebar { order: 1; }—— 左侧栏显示在前，内容区后置（适合移动端优先） - 对 SEO 和屏幕阅读器友好，结构语义不变，仅视觉调整
Flexbox 不是万能，复杂二维网格仍推荐 Grid，但对卡片列表、导航栏、表单分栏等典型多列场景，它比 float 更直观、更健壮、更易迭代。
