浮动子元素脱离文档流，父容器无高度可算，min-height失效；clearfix通过伪元素提供底部锚点使min-height生效，overflow:hidden仅触发BFC但未必产生高度，现代推荐用display:flow-root。
因为浮动子元素脱离文档流，父元素根本“看不见”它们的高度，min-height 失效不是它写错了，而是没高度可撑。
浮动让父容器失去高度计算依据
浏览器计算 height: auto（包括 min-height 的生效前提）时，只统计仍在普通文档流中的内容。一旦子元素设置了 float: left 或 float: right，它就从流中被移除——哪怕它本身高 500px，父容器的 computed height 仍可能是 0px。
- 常见现象：
background-color不显示、border塌成一条线、后续兄弟元素上浮覆盖 -
min-height在 DevTools 的 Computed 面板里显示正常，但视觉上完全没作用 - 加了
height: 100%或width: 100%也无效——前者依赖父级有明确高度，后者只影响水平方向
为什么 overflow: hidden 有时有效，有时没用
overflow: hidden 能“救” min-height，靠的是触发 BFC（块级格式化上下文），让父容器重新包含浮动子项的盒模型。但它不提供高度锚点，所以是否显效取决于有没有其他内容撑起基准：
- 父容器有
padding、border或内部有非浮动文字时，通常能显效 - 若子元素全是浮动，且父容器空荡荡（无 padding/border/文字），BFC 虽然存在，但渲染高度仍可能为
0px -
overflow: auto更稳妥：滚动机制会强制生成最小渲染高度，但要注意下拉菜单等position: absolute元素会被裁剪
真正可靠的清除方案：伪元素 + display: flow-root
现代项目优先用 display: flow-root，它是专为创建 BFC 设计的值，语义清晰、无副作用；老项目或需兼容 IE 时，必须用标准伪元素写法：
.clearfix::after {
content: "";
display: table;
clear: both;
height: 0;
}
- 漏掉任意一项都会失效：
content: ""缺失 → 伪元素不渲染；clear: both写成clear: left→ 清不干净；height: 0缺失 → 额外占空间 - 双冒号
::after是必须的，单冒号:after在部分现代浏览器中已不被识别 - 如果父容器是
display: flex或display: grid，伪元素clear会失效——这些布局下float本就不生效
别再用 float 布局，除非真有必要
Flex 和 Grid 天然不脱离文档流，父容器高度自动由子项撑开，min-height 直接生效，无需任何清除技巧：
-
display: flex下注意：align-items: stretch会被子元素的height、min-height关闭，导致交叉轴不拉伸 -
display: grid中若只设grid-template-columns，行轨道默认为auto，高度由内容决定 - 响应式场景下，
float+overflow: hidden极易在 media query 切换时失效（比如 PC 写了overflow: hidden，平板断点里被覆盖成visible）
最常被忽略的一点：问题往往不出在 min-height 本身，而在于整个高度链上游——比如 html 和 body 没设 height: 100vh，导致 min-height: 100% 计算为 0；或者父容器被其他规则（如 height: 0、display: flex）意外覆盖了清除逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
