min-height失效主因是浮动元素脱离文档流导致父容器塌陷；需通过触发BFC（如overflow:hidden）、伪元素清除浮动或改用flex/grid布局使父容器重新感知子元素高度。
浮动元素脱离文档流，min-height 失去作用基础
min-height 不是魔法，它只在容器“能感知内容高度”的前提下才起效。一旦子元素用了 float: left 或 float: right，它就从文档流中被抽离——父容器计算自身高度时，直接忽略这些浮动子元素。此时哪怕你写了 min-height: 300px，浏览器仍按“空盒子”来渲染父容器，实际高度可能只剩 0 或几像素（仅剩行内内容撑起的高度）。
为什么 clear: both 加在父容器上没用？
clear 属性只对**同一流动上下文中的兄弟元素**生效，不是给父容器“打补丁”的开关。把 clear: both 写在父元素的 CSS 规则里，浏览器根本不会执行清除逻辑，因为它没有参与浮动布局的兄弟节点可“清”。开发者工具里看到父容器 height 是 0、背景色不显示、后续元素叠上来，都是同一问题的表现。
怎么让 min-height 真正生效？
核心是让父容器重新“看见”浮动子元素的高度。有两类实操路径：
- 给父容器触发 BFC：加
overflow: auto或overflow: hidden（注意后者会裁剪溢出内容） - 用伪元素清除浮动：添加
.clearfix::after类，确保content: ""存在 +display: table（或block）+clear: both - 现代方案更推荐：把父容器设为
display: flex或display: grid，浮动本身就不该再用于布局控制
别试图靠 height: 100% 或 min-height: 100% 绕过这个问题——如果父容器高度仍是 auto，百分比值就是无效的。
立即学习“前端免费学习笔记（深入）”；
容易被忽略的 display 和 box-sizing 干扰
即使清除了浮动，以下两点仍可能让 min-height “看起来无效”：
- 父容器是
display: inline（比如<span></span>），min-height完全不参与计算，必须改为inline-block或block -
box-sizing: content-box（默认）时，min-height只管内容区，padding和border会额外叠加；若你设了min-height: 200px、padding: 30px，实际占位是 260px，但开发者工具的“Height”字段可能只标 200px，造成误判
真正卡住问题的，往往不是 min-height 写错了，而是它根本没进入浏览器的高度计算链路——先确认父容器有没有高度感，再谈最小高度。
