min-height 不能解决浮动溢出问题，因其仅设高度下限，无法让父容器感知脱离文档流的浮动子元素；必须先清除浮动（如用 display: flow-root 或 clearfix），父容器才能正确撑高，此时 min-height 才能生效。
min-height 本身不能防止浮动溢出；它只管高度下限，不管浮动脱离文档流的问题。真正要解决浮动撑不开父容器，得先让父容器“感知”到浮动子元素。
为什么 min-height 写了也没用？
常见错误是给父容器加 min-height: 300px 后，发现背景色还是只显示一行高、边框消失、后续元素上浮——这不是 min-height 失效，而是浮动子元素已脱离文档流，父容器压根“看不见”它们，自然不会按内容撑高，min-height 只是在这个“看不见”的基础上设了个底，毫无意义。
- 浮动元素不参与父容器的高度计算，这是 CSS 规范行为，不是 bug
-
min-height的作用对象是父容器自身的高度，但它无法“拉住”浮动子元素 - 若同时写了
height: 100%或overflow: hidden，还可能进一步压制容器行为
必须先清除浮动，才能让 min-height 发挥作用
只有父容器正确包裹了浮动子元素，min-height 才有实际参照——即：父容器高度由浮动内容撑起后，再与 min-height 比较取较大值。
- 推荐用
display: flow-root：现代写法，无副作用，一行解决，但 Safari ≤15.6 不支持 - 兼容老浏览器用 clearfix：在父容器上加
class="clearfix"，配合伪类::after清除浮动 - 慎用
overflow: hidden：虽能触发 BFC 清除浮动，但会意外裁剪position: absolute子元素或阴影
清除浮动后，min-height 的典型用法
此时 min-height 才回归本职：保底视觉完整性，避免内容少时容器塌缩。
- 侧边栏至少显示 3 行文字：
.sidebar { min-height: calc(1.5em * 3); } - 卡片区域统一最小高度，适配不同长度标题+描述：
.card-body { min-height: 120px; } - 配合
overflow: auto做可滚动内容区：.content { min-height: 200px; overflow-y: auto; } - 避免和
height共存：height: 200px会完全覆盖min-height，导致无法自适应
真正容易被忽略的是：清除浮动和设置 min-height 是两个独立步骤，顺序不能颠倒——没清除浮动前，min-height 就像给空气设底线，再写十遍也没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
