父元素高度塌陷是因浮动元素脱离文档流，导致父容器计算高度时忽略它们；.clearfix 是兼容 IE8+ 的稳妥方案，而 display: flow-root 是现代无副作用替代方案。
为什么父元素高度塌陷成0
浮动元素脱离文档流，父容器计算高度时直接忽略它们，结果就是 height: 0 或者边框/背景“消失”。这不是 bug，是 CSS 浮动的原始设计行为——它本就为文字环绕图片服务，不是用来做布局的。
用 .clearfix 是最稳妥的兼容方案
现代浏览器支持 display: flow-root，但 IE 完全不认；overflow: hidden 虽简单，但会意外裁剪子元素的 position: absolute 溢出内容。所以老项目、需要兼容 IE8+ 的场景，.clearfix 仍是首选。
推荐这样写（micro clearfix）：
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
- 必须同时写
::before和::after，否则 IE6–7 下可能失效 -
content: ""不能省，否则伪元素不渲染 - 不要用
display: block替代display: table，IE7 下清除失败
什么时候不该用 .clearfix
如果父容器本身有明确高度（比如设了 height: 200px），或内部有非浮动的块级元素撑开高度，加 .clearfix 不仅多余，还可能干扰后续样式逻辑。
立即学习“前端免费学习笔记（深入）”；
- Flex 布局容器（
display: flex）天然包含 BFC，无需清除浮动 - Grid 容器（
display: grid）同理，浮动对它几乎没影响 - 只在子元素全是浮动、且父容器无其他内容/高度约束时才需要
现代替代方案：优先考虑 display: flow-root
如果项目不需要支持 IE，直接给父元素加 display: flow-root 更干净——它创建新的块级格式化上下文（BFC），自动包含浮动子元素，且不带副作用。
一行解决：
.container {
display: flow-root;
}
- 比
.clearfix少写 5 行 CSS，也不依赖伪元素 - 不会像
overflow: hidden那样意外截断box-shadow或transform溢出 - 注意：Safari 5.1–15.3 需要
-webkit-flow-root前缀（实际可忽略，除非真要兼容 Safari 6）
.clearfix 还是 flow-root，取决于你手里的浏览器列表和代码洁癖程度。 
