新项目优先用 Flexbox，浮动仅用于文字环绕、老项目维护和极简内联排版；Flexbox 解决清浮动、垂直居中、等高列、顺序控制和弹性分配五大痛点。
浮动和 Flexbox 都能排元素，但思路完全不同：浮动是“让元素自己漂走”，Flexbox 是“让容器统一指挥”。现在做新项目，优先用 Flexbox；只有特定场景才保留浮动。
浮动还在用的三个真实理由
它没被淘汰，只是退居二线：
-
文字环绕图片：比如新闻正文里头像右上角带圆角、文字自然绕行，用
float: left+shape-outside最轻量、兼容性最好 - 老项目维护：有些 2015 年前的老系统还在跑 IE11，Flexbox 支持弱，改布局风险大，维持浮动更稳妥
-
极简内联排版：比如一串小图标或标签，不需响应式、不需对齐控制，
float: left加点 margin 就能搞定，代码就一行
Flexbox 解决了浮动最头疼的五件事
不是功能多，而是把以前要“打补丁”的地方，直接设计进规则里：
-
不用清浮动：子元素不会导致父容器塌陷，
display: flex自带 BFC 效果 -
垂直居中不靠猜：
align-items: center一行解决，不用position + transform或line-height偷懒 - 等高列天然成立：同一行的 flex item 默认拉伸到容器高度，浮动得靠 JS 或 hack 模拟
-
顺序可编程：用
order属性调整显示顺序，不用动 HTML 结构 -
空间分配有弹性：
flex: 1、flex: 2直接按比例分宽度，浮动得手动算百分比加 margin
什么时候该选 Flexbox 而不是浮动
满足任一条件，就该切过去：
立即学习“前端免费学习笔记（深入）”；
- 要做响应式（比如移动端从横排变竖排），用
flex-direction: column切换比写一堆float媒体查询干净得多 - 需要动态内容（如用户添加卡片），Flexbox 的
flex-wrap自动换行，浮动换行后容易错位 - 布局里有居中、对齐、间距均分等需求，Flexbox 的
justify-content和gap是声明式控制 - 团队协作或长期维护，Flexbox 逻辑集中、语义清晰，新人看一眼父容器就知道怎么排
混用时必须避开的两个坑
真要过渡期共存，注意边界：
-
别在 flex 容器里给子元素设 float：一旦父级是
display: flex，子项的float属性会被浏览器忽略，还可能引发渲染异常 -
浮动区块后面紧跟 flex 容器时，记得隔离：前面的浮动可能影响后面 flex 容器的位置，加
overflow: hidden或伪元素::after { clear: both }就能稳住
新项目起步，直接上 Flexbox；旧项目改造，从导航栏、卡片列表这类结构清晰的模块开始替换。浮动不是错误，只是工具箱里那把老螺丝刀——好用，但拧复杂螺栓时，该换电动扳手了。
