用 flex 做布局，float 仅用于图文混排；flex 自动撑高、双向对齐、响应灵活、语义正确，float 易塌陷、单向贴边、维护困难、已过时。
flex 布局是现代 CSS 布局模型，float 是为文字环绕设计的定位遗留方案
直接说结论：用 flex 做整体页面或组件布局，别再用 float；float 仅在极少数需要图文混排（比如新闻正文里图片左/右浮动、文字绕排）时才合理使用。强行用 float 做导航栏、卡片网格、响应式栅格，会掉进清除浮动、高度塌陷、响应断点错乱等老坑。
flex 容器内子元素默认不脱离文档流，float 元素天然脱离且影响父容器高度
这是最常踩的实际问题。给一个 div 加了 float: left，它的父容器往往“看不见”它，导致高度坍缩成 0 —— 你得手动加 overflow: hidden 或伪元素 ::after 清除浮动。而 display: flex 的容器天然包含子项，高度自动撑开，无需任何 hack。
-
float元素会触发 BFC，但副作用多，兼容性差（IE6/7 需额外处理） -
flex子项默认是flex-item，受flex-direction、justify-content等统一控制，行为可预测 -
移动端适配时，
flex可配合flex-wrap: wrap自动换行，float必须靠媒体查询 + 重写浮动方向，维护成本高
flex 支持主轴/交叉轴双向对齐，float 只能单向水平贴边
float 只有 left / right / none 三个值，垂直方向完全不可控；flex 则通过两个独立轴（main axis 和 cross axis）提供完整对齐能力：
- 水平居中？
justify-content: center -
垂直居中？
align-items: center（容器设height或min-height） - 等宽自适应？
flex: 1或flex: 0 1 200px精确控制伸缩规则 - 反向排列？
flex-direction: row-reverse，不用改 HTML 结构
而用 float 实现垂直居中，只能靠 position: absolute + transform 或表格模拟，代码冗长且易冲突。
立即学习“前端免费学习笔记（深入）”；
flex 在 IE10+ 有良好支持，float 虽然兼容老浏览器但语义已过时
如果你的项目还需支持 IE9 及以下，那确实不能用 flex（IE10 开始支持带 -ms- 前缀的 flexbox）。但注意：float 的“兼容性优势”是假命题——它从来就不是为布局设计的。W3C 明确将 float 定义为“用于文本环绕图像的定位机制”，CSS Grid 和 Flexbox 才是真正的布局模块。
- 现代项目（含微信 H5、PC 后台、Vue/React 单页应用）应默认用
flex，必要时 fallback 到grid - 若真要兼容 IE9，优先考虑 JS 布局库（如
Flexibility.js）而非倒退用float写整套布局 -
float在响应式断点切换时容易出现残留浮动、重叠、错位，调试困难；flex的flex-wrap和order属性让响应逻辑更清晰
真正难的不是选 flex 还是 float，而是理解它们的设计意图：一个专为布局而生，一个为排版而生。混用或误用，比兼容性问题更早把你拖垮。
