浮动元素脱离文档流，父容器无法感知其高度，故min-height不生效；需通过clearfix（含content、display、clear、height四要素）、overflow:hidden触发bfc或改用display:flow-root解决。
浮动元素本身不支持 min-height，因为 float 会让元素脱离文档流，父容器“看不见”它——所以不是 min-height 失效，而是它根本没进入高度计算链路。
为什么给浮动子元素加 min-height 没用
写 min-height: 200px 在一个 float: left 的 div 上，浏览器确实会解析该声明，但它只影响该元素自身的最小内容区高度；而父容器计算自身高度时，压根不把浮动子项纳入考量。此时父容器的 height 是 auto，且内部无非浮动内容，结果就是视觉塌陷、背景不显示、后续元素上浮。
-
min-height不触发 BFC，也不清除浮动，它只是个“下限”，不是布局锚点 - 开发者工具里能看到
min-height显示在 Computed 面板，但父容器height仍是0px或极小值 - 哪怕子元素有图片或文字，只要它们是浮动的，父容器就无法感知其实际占用空间
clearfix 必须这样写才真正生效
伪元素清除浮动不是加个 class 就完事，漏掉任意一项都会导致 min-height 仍不生效。
-
content: ""必须存在，否则伪元素不渲染，clear失效 -
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 不一定可靠，得看有没有“锚点”
overflow: hidden 能触发 BFC，让父容器包含浮动子项，但它本身不提供高度锚点。如果父容器内部除了浮动元素外完全为空（无文字、无 padding、无 border），BFC 生效了，但容器仍可能渲染为 height: 0，min-height 还是没机会触发。
- 若父容器有
padding或border，overflow: hidden通常能让min-height显效 -
overflow: auto更稳妥：强制生成滚动机制，间接保障最小渲染高度 - 但只要存在溢出风险（如下拉菜单、Tooltip），就不能用
overflow: hidden
现代项目优先用 display: flow-root
display: flow-root 是专为解决此类问题设计的：它创建一个新的块级格式化上下文（BFC），且不带 overflow 的副作用，也不依赖伪元素。
- 兼容性已覆盖 Chrome 64+、Firefox 59+、Safari 15.4+、Edge 79+
- 写法极简：
.container { display: flow-root; min-height: 200px; } - 比
clearfix少 DOM 干扰，比overflow更语义清晰
真正卡住问题的，往往不是 min-height 写错了，而是它根本没进入浏览器的高度计算链路——先确认父容器有没有高度感，再谈最小高度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
