父元素高度塌陷是因浮动元素脱离文档流导致父容器无法感知其高度，clearfix通过伪元素插入清除浮动的块级元素来修复，兼容性好且稳妥；现代布局推荐flex或grid替代float。
父元素高度塌陷是因为浮动脱离了文档流
浮动元素（float: left 或 float: right）会从普通文档流中“抽离”，导致其父容器无法感知子元素的高度，于是计算出的高度为 0。这不是 bug，是 CSS 规范定义的行为。常见于导航栏、图文混排、多栏布局等场景。
- 父元素没有设置固定高度，且内部只有浮动子元素时，高度必然塌陷
- 开发者常误以为加了
height: auto就能解决，其实无效 - 使用
overflow: hidden虽能触发 BFC 修复，但可能意外裁剪阴影、下拉菜单等溢出内容
clearfix 是最稳妥的通用修复方案
clearfix 本质是通过伪元素在父容器末尾插入一个清除浮动的块级元素，强制父容器“包裹”住所有浮动子项。它不依赖其他样式，兼容性好（IE6+），且不影响布局逻辑。
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
- 必须同时写
::before和::after，否则 IE6/7 下可能失效 -
display: table比display: block更安全，避免某些旧版浏览器中 margin 折叠异常 - 不要只用
::after，否则在部分移动端 WebKit 内核中可能漏触发 BFC
现代替代方案：flex 或 grid 布局更推荐
如果不需要支持 IE10 以下，直接放弃 float 是更干净的做法：
-
把父容器设为
display: flex，子项自动排列且父容器自然撑高立即学习“前端免费学习笔记（深入）”；
多列布局可用
display: grid配合grid-template-columns这些方案下，根本不存在“清除浮动”的概念，也无需
clearfix类注意：
float仍保留在部分语义化场景（如文字环绕图片），此时clearfix不可替代混用
float和flex容易引发意外交互，比如浮动子项在 flex 容器中行为不可控
容易忽略的细节：伪元素的 display 值不能省略
::before 和 ::after 默认是 inline 元素，而 clear 只对块级元素生效。若漏写 display: table（或 block），clear: both 将完全无效。
- 有些精简版 clearfix 写成
display: block，也能工作，但table更稳妥（避免 margin 合并） - 不要用
display: inline-block，它不触发块级格式化上下文，也无法清除浮动 - 在 CSS 预处理器中，建议封装为 mixin，避免每次手写重复代码
实际项目中，只要还在用 float 做布局，clearfix 就不是过时技巧，而是必须掌握的兜底手段。但真正该警惕的，是没想清楚为什么要用浮动就直接套上 clearfix。
