浮动导致父容器高度塌陷是因浮动元素脱离文档流；clearfix通过::after伪元素（content:””;display:table;clear:both）触发BFC并清除浮动；overflow:hidden虽可撑高但会裁剪溢出内容，不推荐通用；现代布局应优先使用flex或grid。
浮动元素导致父容器高度塌陷的典型表现
当子元素使用 float: left 或 float: right 后，父容器常常“看不见”它们的高度，表现为高度为 0、背景色不显示、后续元素上移。这不是 bug，是浮动脱离文档流的自然结果。
为什么 clearfix 伪元素能解决这个问题
核心在于触发父容器的 BFC（块级格式化上下文），并用伪元素在末尾插入一个“视觉上不可见但参与布局”的清除节点。现代最稳妥的写法是：
.clearfix::after {
content: "";
display: table;
clear: both;
}
关键点：
-
content: ""是必需的，否则伪元素不渲染 -
display: table触发 BFC，同时避免display: block在 IE6–7 下的 margin 双倍问题 -
clear: both确保它落在所有浮动元素下方，撑开父容器
更简洁的替代方案：overflow: hidden 要小心什么
给父容器加 overflow: hidden 或 overflow: auto 也能触发 BFC 并撑开高度，但它有副作用：
立即学习“前端免费学习笔记（深入）”；
- 会裁剪掉超出容器的内容（比如带负
margin的子元素、下拉菜单、阴影等） - 在移动端可能影响滚动行为（尤其配合
touch-action时） - 无法解决需要精确控制清除位置的场景（如多列浮动后只清某一段）
所以它适合简单布局，但不推荐作为通用清除手段。
现代开发中要不要还写 clearfix
如果项目已全面使用 display: flex 或 display: grid 布局，浮动本身就应该被避免——它们天生不脱离文档流，无需清除。
但如果维护老项目、或必须兼容 IE8 及以下，clearfix 仍是必要技能。注意别漏掉 IE6–7 的兼容写法：
.clearfix {
*zoom: 1; /* 触发 hasLayout */
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
真正容易被忽略的是：伪元素默认是 inline，没设 display 就不会生效；还有很多人把 ::after 写成 :after 却忘了 IE8 只认单冒号——这些细节一错，整个清除就失效。