浮动父容器塌陷因子元素脱离文档流致高度为0；flex容器则通过弹性上下文自动计算子项尺寸，无需清除浮动，且float属性被忽略，须彻底移除相关声明并用justify-content、gap等替代旧布局方式。
为什么浮动父容器会塌陷，而flex不会
浮动元素脱离文档流，父容器感知不到子元素高度，自然收缩到0；display: flex让父容器成为弹性上下文，子项无论是否浮动、是否设置float，都会被纳入主轴尺寸计算——它根本不依赖“清除浮动”这种补救逻辑。
关键区别在于：塌陷是浮动遗留问题，flex是布局模型重构。不是“flex支持clearfix”，而是clearfix在flex容器里根本没意义。
把float布局直接套上display: flex会出事吗
大概率会错乱。浮动属性（float: left、clear）在flex容器中被忽略，但它们还在CSS里，容易误导后续维护者，也可能干扰调试工具的样式计算。
- 必须删掉所有
float、clear相关声明，包括类名（比如.clearfix、.fl这类语义化浮动类） - 用
justify-content或margin替代float: right对齐需求 - 原靠
float实现的多栏等高，现在由flex天然保证，无需额外hack
旧代码里还有overflow: hidden撑高父容器，能留着吗
可以留，但没必要。这个技巧本质是触发BFC来包裹浮动子项，属于过渡期权宜之计。换成display: flex后，它既不参与布局，又可能意外裁剪内容（比如下拉菜单、tooltip溢出）。
立即学习“前端免费学习笔记（深入）”；
- 删掉
overflow: hidden，除非你真需要裁剪 - 如果删了后视觉异常，说明子项仍有未清理的
position: absolute或transform导致脱离弹性流，要单独处理 - 注意IE11对
overflow和flex的组合有渲染bug，若需兼容，优先测试而非加回overflow
inline-block + vertical-align那种老式行内布局，能用flex一步替换吗
能，而且更稳。inline-block受换行符、字体大小影响高度，vertical-align行为难预测；flex的align-items和gap是确定性控制。
- 把父容器设为
display: flex，子项自动变成flex item，vertical-align失效，直接删 - 用
align-items: center替代vertical-align: middle - 用
gap替代font-size: 0或负margin来消除inline-block间隙 - 注意：如果子项有
white-space: nowrap且内容超长，flex默认不换行，需加flex-wrap: wrap
min-height和height行为跟块级容器不同，尤其嵌套时，父容器若没明确高度约束，子项的flex: 1可能不生效——这不是bug，是弹性算法按可用空间分配的结果。 
