父容器高度塌陷导致min-height失效，根本原因是浮动子元素脱离文档流，使父容器height计算为0；修复须在父容器创建bfc，推荐display: flow-root。
父容器高度塌陷导致min-height失去作用基础
子元素用了 float，父容器就“看不见”它了——这是 CSS 规范行为，不是 bug。浏览器计算父容器的 height: auto（包括 min-height 的生效前提）时，只考虑仍在文档流中的内容。浮动元素完全脱离文档流，哪怕它有 height: 500px，父容器仍会渲染为 height: 0，此时 min-height 就像锚点悬空，根本没机会触发。
常见现象包括：min-height 在 DevTools 的 Computed 面板里显示正常，但父容器视觉上只有一条线高；背景色不显示；后续兄弟元素叠在上面；滚动条没出现但内容“消失”了。
- 用 DevTools 检查父容器的
computed height：如果是0px或auto且无非浮动内容支撑，说明高度链已断 - 临时删掉所有子元素的
float，看父容器是否立刻恢复高度——这是最直接的验证方式 - 不要试图给父容器加
clear: both：这个声明对父元素本身无效，CSS 解析器会忽略
clearfix 为什么能救 min-height，而 overflow: hidden 不一定行
.clearfix::after 生效的关键，在于它插入了一个真实参与文档流的块级伪元素，并用 clear: both 强制它下移到所有浮动元素下方，形成一个“底部锚点”。这个锚点哪怕 height: 0，也会把父容器的 height: auto 基准拉下来，min-height 才有作用空间。
overflow: hidden 是靠触发 BFC 来包含浮动，但它本身不提供高度锚点。如果父容器内部除了浮动元素外完全为空（没有文字、没有 padding、没有 border），BFC 虽然生效，容器仍可能渲染为 height: 0。
-
overflow: auto比hidden更稳妥：它会强制生成滚动机制，间接保障最小渲染高度 - 若父容器有
border或padding，overflow: hidden通常也能让min-height显效 - 但只要存在内容溢出风险（如下拉菜单、Tooltip），
overflow: hidden就不该用
现代解法：display: flow-root 是最干净的选择
display: flow-root 是专为解决这类问题设计的属性，它强制创建 BFC，使父容器重新包含浮动子元素，同时不改变溢出行为、不引入滚动条、不破坏语义。写法极简：.parent { display: flow-root; }，无需额外类名或伪元素。
兼容性已覆盖 Chrome 64+、Firefox 58+、Edge 79+、Safari 15.4+，2026 年绝大多数项目可直接用。注意：不要和 float 同时用在同一个元素上，float 会覆盖 flow-root 的布局行为。
- 对比
overflow: auto：flow-root完全规避横向滚动条意外触发的风险 - 若必须支持 IE11 或老 Safari，仍可用
::after伪元素，但关键细节不能错：display: table（不是block）才能真正撑开高度 - 伪元素中若父容器有
font-size: 0，需重置伪元素的font-size: medium，否则旧版浏览器可能渲染为高度 0
别踩这些坑：min-height 失效的隐藏开关
即使你加了 clearfix 或 flow-root，min-height 仍可能失效——问题常藏在子元素自身。
- 子元素写了
height: 100%：它依赖父容器有确定高度，而浮动塌陷后父容器高度是auto，结果退化为0px，和min-height冲突 - Flex 容器中子元素显式设了
height、min-height或max-height：这会关闭align-items: stretch，导致交叉轴不拉伸，min-height失去上下文 - 用了
rem却没设html { font-size }：IE10 直接当0rem处理，值实际为 0 -
min-height: 100vh在 iOS Safari 地址栏收起/展开时跳变，初始渲染可能取值异常
真正麻烦的是混合场景：父元素用了 flow-root，但某个子元素又用了 position: absolute——浮动清除了，绝对定位又脱离了，高度计算再次出意外，得单独处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
