Flex容器天然具备BFC，能自动包含浮动子项、避免高度塌陷，无需clearfix等hack；对齐伸缩由父容器统一控制，规则明确、响应稳定。
flex 容器天然包含 BFC，不用手动“撑高”父容器
浮动元素会脱离文档流，导致父容器高度塌陷——哪怕子元素设置了 height: 200px，只要没内容或没清除浮动，父容器就可能高为 0。这是最常被误判为“CSS 失效”的现场。
- float 布局必须靠
overflow: hidden、伪元素::after { clear: both }或额外空标签来“补救”，逻辑断裂且易遗漏 - flex 容器默认就是 BFC（块级格式化上下文），子项无论是否浮动、是否有内容、是否溢出，都会被自然包含，父容器高度始终可预测
- 不需要任何 hack：没有
clearfix类，没有zoom: 1，没有display: table补丁
对齐与伸缩规则统一由父容器声明，不依赖子项自设宽高
float 布局中，每个子项都得自己管宽度、自己算 margin、自己防换行错位；而 flex 把控制权收归父容器，子项只需说“我要怎么参与分配”，规则集中、无歧义。
- 三栏等宽？float 下要写
width: calc(100% / 3 - 2px)+ 负 margin 修正间隙；flex 只需flex: 1三次，自动均分剩余空间 - 侧边栏固定 240px、主内容自适应？float 得给主内容加
margin-left: 240px，一旦侧边栏隐藏就全乱；flex 写.sidebar { flex: 0 0 240px }+.main { flex: 1 }，隐藏 sidebar 后 main 自动占满，无需改样式 - 子项内容长短不一？float 下两栏高度不同、底部参差；flex 默认
align-items: stretch，天然等高，不写一行 JS
flex-shrink 和 flex-basis 的优先级陷阱必须主动规避
所谓“更稳定”，不是写上 display: flex 就万事大吉。很多布局突然压缩变形，其实是 flex-shrink 在暗中生效，而开发者误以为 width 或 max-width 能压住它。
-
flex: 1等价于flex: 1 1 0，意味着“可缩小”，遇到窄容器时子项会被无情压缩——图标、头像、按钮可能糊成一条线 - 想禁止压缩？显式写
flex-shrink: 0，再配flex-basis: auto（否则width会被忽略） - 别混用
width和flex-basis：当两者同时存在，flex-basis优先级更高；想用 width 控制基准尺寸，就别写flex-basis
HTML 空格仍会产生间隙，但解决方式比 float 更可控
很多人从 float 切到 flex 后发现“怎么多了 4px 间隙？”，其实不是 flex 的 bug，而是 HTML 中的换行和空格被渲染为空白符——这点 float 也一样，只是过去常用 font-size: 0 压掉，而该法在 flex 中失效。
立即学习“前端免费学习笔记（深入）”；
- 推荐方案：把子元素标签写成紧挨着的
消除换行 - 次选方案：给子项设
display: block或font-size: 0在 flex 容器上（注意子项内文字要重设 font-size） - 避免用负 margin 抵消，那会破坏 flex 的空间计算逻辑，尤其在响应式缩放时容易露馅
布局稳定的本质，不是属性多不多，而是规则有没有唯一解释路径。float 的每一步行为都依赖上下文（是否兄弟元素也在 float？父容器有没有 overflow？有没有触发 BFC？），而 flex 的每个属性都在容器/项目两级明确定义了“谁说了算”。真正容易被忽略的，是那些没写的默认值——比如 flex-shrink: 1 和 align-items: stretch，它们不报错，却悄悄决定着你的布局会不会在小屏下坍缩、在内容变少时失衡。
