min-height失效是因为浮动元素脱离文档流，父容器无高度基准可比；clearfix通过伪元素插入块级锚点拉低底部，使min-height生效，而overflow:hidden仅触发bfc却不提供锚点。
设置了 min-height 却撑不开父容器，不是 min-height 写错了，而是父容器压根没高度可算——所有子元素都 float: left 或 float: right，全部脱离文档流，浏览器直接“看不见”它们。
为什么 min-height 在浮动下完全失效
浮动元素不参与父容器的 height: auto 计算，而 min-height 的生效前提是父容器有“可比较的高度基准”。如果基准是 0（即 computed height 为 0px），再大的 min-height 也无从触发。
- 开发者工具里看到父容器
height: 0px、背景色消失、后续兄弟元素上浮，都是同一症状 -
min-height: 500px和min-height: 10px效果一样——都撑不开 - 图片加载完成、内容变多后，
min-height依然不会动态响应，塌陷照旧 - 响应式场景下固定值极易失效：手机屏上
min-height: 300px可能远超内容，桌面端又不够
用 clearfix 伪元素真正解决问题
它插入一个真实参与文档流的块级锚点，并用 clear: both 强制下移到所有浮动元素下方，把父容器的 height: auto 基准拉下来，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。
- 若父容器有
padding或border，overflow: hidden通常能让min-height显效 -
overflow: auto更稳妥：强制生成滚动机制，间接保障最小渲染高度 - 但只要存在溢出风险（如下拉菜单、Tooltip），就不能用
overflow: hidden - 现代推荐用
display: flow-root—— 它专为解决此问题设计，语义清晰、无副作用
Flex 布局中 min-height 失效的隐藏开关
把父容器改成 display: flex 确实能绕过浮动塌陷，但别以为 min-height 就自动好了——子元素只要显式写了 height、min-height 或 max-height，就会关闭 align-items: stretch，导致它不再拉伸填满父容器交叉轴，min-height 就失去上下文。
- 临时删掉子元素的所有
height/min-height声明，看是否立刻等高 - 检查父容器 computed
height是否为auto（如果是0px，说明上层高度链断了） - 在
flex-direction: column下，align-items: stretch控制的是宽度，跟高度无关 - 正确做法：父容器设
min-height: 100vh，子元素用flex: 1或align-self: flex-start
最易被忽略的一点：清除浮动不是加个 class 就完事，漏掉 content、display、clear、height 中任意一个，都会白忙活；而 display: flow-root 虽好，但 Safari 15.4 之前不支持，旧项目得留一手降级方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
