flex从模型层面绕开float缺陷，容器真实感知子项并统一调度空间；float靠推挤且垂直失控，flex用justify-content和align-items统一控制对齐，原生支持响应式、等高列、顺序切换与gap间隙管理。
Flex 不是“比 float 好一点”，而是从模型层面绕开了 float 的对齐与自适应缺陷——它不靠元素“假装消失”来排版，而是让容器真实感知子项、统一调度空间。
float 的对齐本质是“推挤”，不是“控制”
float: left 并不真正在意父容器的边界或兄弟元素的尺寸；它只是把自身“踢出文档流”，然后靠 margin 或其他元素的 clear 来间接影响位置。这种模式下：
- 水平对齐靠 float 自身属性，但无法反向控制（比如“让所有子项右对齐”，得每个都写
float: right，且顺序会反转） - 垂直方向完全失控：
vertical-align对浮动元素无效，margin-top常被忽略，想居中基本要套position: absolute或 JS 计算 - 文字环绕是唯一正向场景：比如
img { float: left; }+ 段落文本自动绕行，这是 float 不可替代的语义能力
flex 的对齐由容器统一声明，天然支持响应式伸缩
flex 容器通过 justify-content（主轴）和 align-items（交叉轴）两套规则接管全部对齐逻辑，子项不再各自为政：
-
justify-content: space-between可直接替代“左 float + 右 float + 中间清空”的老套路，且不会因内容增减错位 -
align-items: center一行实现图文垂直居中，无需调line-height、transform或负 margin - 子项宽度用
flex: 1或flex: 0 1 200px表达弹性意图，浏览器自动按剩余空间分配，不依赖百分比硬编码 - 换行需显式加
flex-wrap: wrap，但这恰恰是可控性的体现——浮动“天然换行”反而在小屏下容易错行、间隙断裂
自适应能力差异：float 靠 hack，flex 靠原生机制
float 本无响应式基因，所谓“适配”全是补丁堆砌；flex 则把响应式作为一等公民设计：
- 等高列：float 下两栏高度不同就得靠
padding-bottom: 9999px+margin-bottom: -9999px这类 hack；flex 默认align-items: stretch，同级子项高度自动拉齐 - 顺序切换：float 顺序由 HTML 结构和 float 方向强绑定，改显示顺序必须动 DOM；flex 用
order属性即可重排，不影响语义 - 移动端竖排：float 要写一堆媒体查询 +
clear重置；flex 只需flex-direction: column，整块布局一键翻转 - 间隙管理：
gap是 flex 原生属性，不触发外边距合并，也不需要:last-child { margin-right: 0 }这种防御性代码
混用时最常被忽略的冲突点
过渡期容易误以为“加了 display: flex 就万事大吉”，但实际存在隐性冲突：
- 子元素若还保留
float: left，现代浏览器会优先处理 float，再套 flex 排列，结果不可控——必须显式写float: none - 浮动区块紧邻 flex 容器时，前面的 float 可能导致后者位置偏移，需在 flex 容器上加
clear: both或display: flow-root隔离 - IE10–11 对
flex: 0 0 auto支持差，建议写成flex: 0 0 100%或具体像素值，避免子项塌缩
真正难的不是“怎么把 float 改成 flex”，而是判断哪些地方 float 仍不可删——比如新闻正文里的 shape-outside 图文环绕，或邮件模板中 Outlook Desktop 对 flex 的零支持。这些不是技术落后，而是能力边界的客观存在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
