父元素高度塌陷是因浮动元素脱离文档流导致；解决核心是让父元素重新感知浮动子元素，常用触发BFC的overflow:hidden（简洁但会裁剪溢出）或clearfix（语义化、无裁剪风险）；现代布局应优先使用Flex/Grid替代浮动。
父元素高度塌陷是因为浮动元素脱离了文档流
当子元素设置了 float: left 或 float: right，它就不再参与父容器的高度计算——父元素会“看不见”它，导致高度收缩为 0（尤其在父元素没设高度、且无其他非浮动内容时）。这不是 bug，是 CSS 浮动的原始设计行为。
解决的核心思路只有一个：让父元素“重新感知”浮动子元素的存在。常见手段就是触发 BFC（块级格式化上下文），而 overflow: hidden 和 clearfix 都是触发 BFC 的有效方式，但机制和适用场景不同。
用 overflow: hidden 是最简方案，但有隐藏溢出风险
给父元素加 overflow: hidden（或 overflow: auto）能立即触发 BFC，使父元素包裹住浮动子项。但它本质是“强制裁剪”，一旦子元素超出父容器边界（比如下拉菜单、绝对定位偏移、阴影外扩），就会被截断。
- 适合内部布局完全可控、无溢出需求的容器（如导航栏、卡片网格）
-
overflow: auto在必要时加滚动条，比hidden更安全一点，但视觉上可能突兀 - 不推荐用于可能含
position: absolute子元素的父容器，容易遮挡内容
.parent {
overflow: hidden;
}
.child {
float: left;
width: 200px;
}
clearfix 是更稳妥的语义化方案，兼容性好
clearfix 本质是通过伪元素在父容器末尾插入一个“清浮动”的块，不依赖溢出控制，也不影响子元素渲染。现代写法用 ::after + clear: both，兼容 IE8+。
立即学习“前端免费学习笔记（深入）”；
关键点在于：伪元素必须是块级、不可见、且带 clear: both；同时父元素不能设 height 或 min-height 覆盖清除效果。
- 避免直接复用旧版 IE6/7 的
zoom: 1hack，除非必须支持极老浏览器 - 不要只写
clear: both在父元素自身上——它不起作用，因为清除的是“前面的浮动”，不是“内部的浮动” - 如果父元素用了 Flex 或 Grid 布局，根本不需要 clearfix，浮动本身已失效
.clearfix::after {
content: "";
display: table;
clear: both;
}
现代项目优先考虑不用 float 做布局
浮动本意是文字环绕图片，不是做栅格或导航。现在用 display: flex 或 display: grid 替代浮动布局，既无塌陷问题，又语义清晰、响应式友好。
如果你还在维护老代码，overflow: hidden 快速救急可以，但长期应逐步替换为 Flex/Grid；若必须保留浮动（比如兼容性要求），clearfix 是更干净的选择——它不改变盒模型行为，也不隐式裁剪内容。
真正容易被忽略的是：父元素如果有 border 或 padding，在加 overflow: hidden 后，这些边框/内边距依然存在，但内容被裁掉，看起来像“消失”，其实只是被藏起来了。
