父元素塌陷是因为浮动元素脱离文档流，导致父容器无法感知其高度；clearfix经典写法为.clearfix::after { content: ""; display: table; clear: both; }，需作用于直接父容器。
为什么父元素会塌陷？
浮动元素脱离文档流，导致父容器无法感知其高度，表现为高度为 0、背景消失、后续元素上移。这不是 bug，是 CSS 浮动的原始设计行为——但实际布局中它几乎总是需要被修复。
clearfix 的经典写法怎么写？
最通用、兼容 IE8+ 的方案是给父容器添加一个 class，并用伪元素触发 BFC：
.clearfix::after {
content: "";
display: table;
clear: both;
}
关键点：
-
content: ""必须存在，否则伪元素不渲染 -
display: table（或block）让伪元素参与盒模型计算 -
clear: both强制它下移到所有浮动元素下方，从而撑开父容器 - 必须作用于浮动元素的**直接父容器**，不能写在更外层
现代写法能不用 clearfix 吗？
能，而且更推荐——前提是不需要支持 IE。
立即学习“前端免费学习笔记（深入）”；
以下任一方式可替代 clearfix：
- 给父容器设
display: flow-root：专为此场景设计，创建新的 BFC，无副作用 - 用
display: flex或display: grid：父容器变成弹性/网格容器后，自动包含浮动子项（但会改变子项布局逻辑） - 避免浮动本身：用
inline-block、flex或grid实现并排布局，从源头消除问题
注意：overflow: hidden 虽然也能触发 BFC 撑高父容器，但可能意外裁剪阴影、下拉菜单等溢出内容，慎用。
容易被忽略的细节
clearfix 不是万能胶——它只解决“高度塌陷”，不解决浮动带来的其他布局干扰。
- 如果浮动元素后面还有非浮动兄弟元素，它们仍会围绕浮动元素排列，
clearfix不影响这点 - 多个浮动元素之间若没清除，
::after只在最后生效，中间换行需额外加clear - 使用 Sass/Less 时，别把
clearfix混进重置样式里全局应用，容易误伤
真正要留意的，是那个被你加了 float: left 却忘了处理父容器的 div——它就在那儿，静静塌陷着。
