min-height 失效是因为浮动子元素脱离文档流导致父容器高度为0，清除浮动（如clearfix）或使用display: flow-root才能恢复高度计算基准。
min-height 不是失效了，是父容器压根没高度可比——浮动子元素脱离文档流，父容器计算 height: auto 时直接忽略它们，min-height 失去作用基准。
为什么加了 min-height 父容器还是塌陷成一条线
浏览器渲染时，float 元素不参与父容器的常规高度计算。哪怕你写 min-height: 500px，只要所有子元素都 float: left 或 float: right，父容器的 computed height 就仍是 0px（除非有非浮动内容、padding、border 或其他撑开因素）。
- 常见现象：
background-color不显示、box-shadow消失、后续兄弟元素上浮覆盖、滚动条不出现但内容“看不见” -
min-height在 DevTools 的 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——专为创建 BFC 设计，无裁剪副作用，Chrome 64+ / Firefox 64+ / Safari 15.4+ 支持
别忽略 flex/grid 布局里的连锁反应
把父容器改成 display: flex 确实能绕过浮动塌陷，但别以为 min-height 就自动好了：
- 子元素若显式写了
height、min-height或max-height，会关闭align-items: stretch，导致它不再拉伸填满交叉轴 - 在
flex-direction: column下，align-items: stretch控制的是宽度，跟高度无关 - Grid 容器中，子项的
min-height只在父容器已有可计算高度（如height: 100vh）时才起作用；若grid-template-rows写死为固定值，也会锁死子项高度
真正容易被忽略的点在于：清除浮动只是恢复高度计算的前提，而 min-height 是否最终可见，还取决于父容器是否具备可参照的高度上下文——比如祖先链中有没有 height: 0、有没有 transform 触发新层叠上下文遮挡阴影、或者用了 vh 却没处理 iOS 地址栏跳变。
