flex容器默认触发bfc，能正确包裹子项高度；浮动容器则因高度塌陷需手动清除，且float等属性在flex中失效，混用易引发布局异常。
Flex容器默认触发BFC，浮动容器不会
浮动元素脱离文档流，父容器无法感知子项高度，必然导致高度塌陷；而display: flex容器天然形成块级格式化上下文（BFC），子项无论是否溢出、是否设flex: 1、是否换行，父容器都能正确计算并包裹高度。
常见错误现象：给浮动容器加background-color却看不到背景，或边框“断掉”，其实不是CSS没生效，是父容器高度为0。此时加overflow: hidden看似修复，实则可能裁剪position: absolute子元素（比如下拉菜单）。
- 浮动容器必须手动补救：伪元素
::after { content: ""; display: table; clear: both; }、overflow: hidden、或额外空标签 - Flex容器无需任何清除手段——
clear在flex上下文中完全无效，写了也白写 - 老项目迁移时若保留
.clearfix类，反而可能因多重BFC触发匿名表格盒，干扰margin合并
子项float属性在Flex容器中会被忽略甚至引发异常
一旦父容器设了display: flex，子元素的float（如float: left）、clear、vertical-align全部失效。这不是“兼容性问题”，而是规范明确要求的行为。
但真实项目里常有过渡期混用：比如旧代码还留着li { float: left; }，新容器却加了display: flex。此时浏览器会先尝试处理float，再套flex规则，结果不可控——可能错位、压缩、或部分子项不参与伸缩。
- 必须显式重置：
.container > * { float: none; }，不能依赖“它反正不起作用”就放着不管 - IE10/11需补全
-ms-flex: 1，否则flex: 1不生效，但float仍会干扰渲染 - 若子项含图片且本意是文字环绕，别硬塞进flex容器——那是
float的原生场景，强行用flex模拟只会绕路
Flex容器控制权集中，浮动容器责任分散
浮动布局中，每个子项要自己管宽度（width: 33.33%）、自己防错行（min-width）、自己算间隙（负margin），稍一遗漏就错位；Flex则把对齐、分配、换行全交给父容器声明，子项只需说“我要怎么参与”。
比如三栏等宽：float得写width: calc(100% / 3 - 2px)再加负margin修正间隙；flex只用三个flex: 1，间隙用gap: 8px一行搞定。
-
justify-content统一控制主轴对齐，不用每个子项设margin-left: auto -
align-items: stretch默认等高，浮动下两列内容长短不一就真的参差不齐 -
flex-wrap: wrap自动折行，浮动需配合媒体查询+重置float+重新清除，漏一条就翻车
Flex主轴方向默认是row，但浮动没有“主轴”概念
浮动只有left/right，靠副作用排位置；Flex则明确定义主轴（flex-direction）和交叉轴，语义清晰。这带来两个关键差异：
一是响应式切换极简：flex-direction: column就能让横排导航变竖排，浮动得写一堆@media + float: none + clear: both；二是右对齐按钮组改用justify-content: flex-end更干净，但若容器宽度不定，得加min-width: fit-content防压缩——这点容易被忽略，因为浮动下float: right天然撑容器。
- 浮动不关心容器宽度，只管“贴边”，所以不会被压缩
- Flex子项默认可收缩（
flex-shrink: 1），flex: 1不等于“强制占满”，min-width: 0缺失时可能意外压缩 - 过度嵌套flex（三层以上）+ 缺失
min-width，反而比简单浮动更难调试
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
