min-height 无法解决浮动塌陷，因浮动元素脱离文档流致父容器高度为0；须清除浮动或触发bfc（如display: flow-root、clearfix、overflow:hidden/auto）来修复。
min-height 本身无法解决浮动导致的撑开问题，它只是“视觉兜底”；真正要让父容器感知浮动子元素高度，必须清除浮动或触发 BFC。
为什么 min-height 在浮动父容器里像没写一样
浮动子元素脱离文档流，父容器计算 height: auto（包括 min-height 的基准）时直接忽略它们。结果就是：父容器 computed height 是 0px，哪怕你写了 min-height: 500px，背景、边框、后续兄弟元素都会出错。
- 常见现象：
background-color不显示、box-shadow消失、滚动条不出现但内容“看不见” - DevTools 中
min-height在 Styles 面板里存在，Computed 面板却显示height: 0px - 图片加载完成或 JS 插入新内容后，塌陷依然存在——因为浮动机制没变
clearfix 必须满足四个条件才真正生效
只加 .clearfix class 不够，漏掉任意一点，伪元素就无法形成底部锚点，min-height 依然无效。
-
content: ""必须存在，否则::after根本不渲染 -
display: table比block更稳妥：隐式触发 BFC，且避免 IE 下 margin 合并 -
clear: both是核心，不能写成clear: left或漏掉 -
height: 0或visibility: hidden必须加，否则伪元素会额外占空间
标准写法：
.clearfix::after {
content: "";
display: table;
clear: both;
height: 0;
}
overflow: hidden 能用但有隐藏风险
它靠触发 BFC 包含浮动，但不提供高度锚点。如果父容器内部除了浮动元素外完全为空（无文字、无 padding、无 border），BFC 虽然生效，容器仍可能渲染为 height: 0，min-height 就还是没机会触发。
- 若父容器有
border或padding，overflow: hidden通常能让min-height显效 - 但一旦存在下拉菜单、Tooltip、弹层等可能溢出的内容，
overflow: hidden会裁剪它们 -
overflow: auto更稳妥：强制生成滚动机制，间接保障最小渲染高度
现代首选是 display: flow-root
display: flow-root 是专为创建 BFC 设计的，无裁剪副作用，Chrome 64+ / Firefox 64+ / Safari 15.4+ 支持良好。
- 写法极简：
.container { display: flow-root; }，无需伪元素、无需担心clear顺序 - 它和
display: block一样参与 margin 合并，但内部浮动不会再“逃逸”出容器边界 - IE 完全不支持；Safari ≤14 存在
min-height解析异常，老项目仍需.clearfix
真正容易被忽略的不是“选哪个方案”，而是浮动是否还在父容器的渲染边界内——比如用了 margin-left: -20px 或 transform: translateX(-10px)，视觉上“跑出”了，但父容器依然不会塌陷或裁剪。这不是清除失效，是布局意图本身需要被重新审视。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
