父容器高度塌陷是因浮动元素脱离文档流导致，::after伪元素清除浮动是最主流方案；需加在浮动元素的直接父容器上，flex/grid布局可天然规避该问题。
父容器高度塌陷是因为浮动脱离文档流
当子元素设置了 float: left 或 float: right，它会脱离普通文档流，父容器无法感知其尺寸，导致高度坍缩为 0。这不是 bug，是浮动的原始设计行为——为了实现文字环绕图片这类排版需求。
常见现象：div 父容器背景色看不见、边框不包裹内容、后续兄弟元素向上“窜位”。
用 ::after 伪元素触发 BFC 并清除浮动
这是目前最主流、语义清晰且兼容性良好的方案（IE8+ 支持）。核心思路是：在父容器末尾插入一个伪元素，设置 clear: both，并让该伪元素参与格式化上下文（BFC），从而撑开父容器。
.clearfix::after {
content: "";
display: table;
clear: both;
}
关键点说明：
立即学习“前端免费学习笔记（深入）”；
-
content: ""是必需的，否则伪元素不渲染 -
display: table（或block）确保伪元素生成盒模型；用table更稳妥，避免某些浏览器中block在 inline 上下文中异常换行 -
clear: both强制该伪元素下移至所有浮动元素下方，从而拉高父容器高度 - 不要漏写
::after的双冒号（CSS3 规范），但 IE8 只认单冒号:after，如需兼容可写两遍
为什么不用 overflow: hidden？
虽然 overflow: hidden（或 auto）也能触发 BFC、撑开父容器，但它有副作用：
- 内容溢出时会被裁剪，比如下拉菜单、绝对定位弹层、阴影外延等意外消失
- 滚动条可能意外出现（
overflow: auto） - 与
transform、will-change等属性组合时，可能引发渲染层叠问题 - 语义不清：你本意是“清除浮动”，却写了“隐藏溢出”
所以除非明确需要裁剪，否则不推荐用 overflow 作为清除手段。
现代替代方案：Flex / Grid 布局天然规避浮动问题
如果父容器本身只是用来布局，而非实现图文环绕，那更推荐直接放弃浮动：
- 用
display: flex替代浮动排列子项，父容器自动包含高度 - 用
display: grid控制子元素位置，同样无塌陷风险 - 浮动已逐渐退场，MDN 明确标注其为“legacy layout method”
但注意：若项目需支持 IE9 及以下，或必须兼容老式 CMS 模板结构，::after 清除仍是刚需。
真正容易被忽略的是：清除浮动必须加在**浮动元素的直接父容器**上，而不是更高层祖先；且一旦子元素里新增了浮动，就得检查对应父级是否也加了 clearfix —— 这个责任边界很容易漏。
