高度塌陷是因浮动或脱离文档流子元素导致父容器无法计算高度，表现为内容溢出等；min-height仅视觉兜底，触发BFC（如overflow:hidden、display:flow-root）或改用flex/grid才是根本解决。
高度塌陷通常发生在父容器内只有浮动（float）子元素，或子元素脱离文档流（如使用 position: absolute、display: inline-block 未触发 BFC）时，导致父容器无法正确计算高度，表现为“看起来没高度”——内容溢出、背景消失、边框不包裹内容等。
用 min-height 确保最小视觉高度
min-height 不解决塌陷根源，但能兜底保障父容器至少有基础高度，避免页面结构“突然变矮”。适合内容高度波动但需维持界面稳定性的场景（如卡片、侧边栏、页脚区域）。
- 设置合理值：比如
min-height: 200px或基于视口的min-height: 100vh - 搭配
height: auto（默认），让内容多时仍可自然撑高 - 注意不要和
height: 100%混用，后者依赖父级明确高度，易引发连锁塌陷
真正修复塌陷：触发 BFC 或清除浮动
要让父容器“感知”子元素高度，核心是让其建立块级格式化上下文（BFC）或清除浮动影响。
- 给父容器加
overflow: hidden（或auto、scroll）——最常用且兼容性好 - 使用
display: flow-root——现代标准方案，语义清晰，无副作用（IE 不支持） -
伪元素清除法：
::after { content: ""; display: table; clear: both; }——兼容老浏览器的经典写法 - 避免仅靠
float布局，优先用flex或grid，天然不塌陷
检查是否误用了脱离文档流的属性
如果子元素用了 position: absolute 或 fixed，它就完全脱离文档流，父容器默认对其“视而不见”。
立即学习“前端免费学习笔记（深入）”；
- 确认是否真需要绝对定位；若只是想右对齐/居中，优先用
margin、text-align、flex等流内方案 - 必须用绝对定位时，手动给父容器设高度（
height或min-height），或通过 JS 动态计算 - 注意
relative不会导致塌陷，它仍在文档流中
基本上就这些。min-height 是视觉兜底，BFC 或现代布局才是治本之策。别让“看起来正常”掩盖了结构隐患。
