浮动元素脱离文档流导致父容器高度塌陷；clearfix通过伪元素::after设置content: ""、display: table和clear: both，使父容器重新包含浮动子元素。
为什么浮动元素会导致父容器高度塌陷
当 li 或其他列表项使用 float: left 或 float: right 布局时，它们会脱离文档流，父 ul 或 div 无法感知子元素的高度，于是计算出的高度为 0 或仅包含内边距/边框——这是 CSS 浮动的经典副作用。
clearfix 的核心原理是什么
clearfix 并不是魔法，它靠的是在父容器末尾插入一个「清除了浮动」的伪元素（::after），强制让父容器重新包含浮动子元素。关键在于这个伪元素必须满足两个条件：display: table（或 block）且带有 clear: both。
-
clear: both确保该伪元素不与任何浮动元素并排，必须下移至所有浮动元素下方 -
display: table（比block更稳妥）可避免某些旧版浏览器中因height: 0导致的渲染异常 - 必须设置
content: ""，否则伪元素不会生成
如何正确应用 clearfix 类
不要直接给 ul 写 overflow: hidden 这类“快捷方案”——它可能裁剪阴影、下拉菜单或定位元素。推荐用语义清晰、兼容性好的 clearfix 类：
.clearfix::after {
content: "";
display: table;
clear: both;
}
.clearfix {
*zoom: 1; /* IE6/7 hack */
}然后在 HTML 中这样用：
立即学习“前端免费学习笔记（深入）”；
- Item 1
- Item 2
- 确保该类只加在**浮动子元素的直接父容器**上（比如
ul，而不是外层div） - 如果使用 Sass/Less，可封装成
@mixin clearfix复用 - 现代项目中若已放弃 IE8 及以下，
*zoom: 1可省略
Flexbox 替代方案是否更可靠
是的，但要看场景。如果只是做横向列表布局，display: flex 几乎零成本解决高度问题：
ul {
display: flex;
flex-wrap: wrap;
}
li {
float: none; /* 必须移除 float */
}- Flex 容器天然包含子项，无需额外清理
- 注意：IE10+ 支持较完整，但 IE9 及以下完全不支持，仍需 fallback
- 如果项目中已有大量浮动逻辑（比如配合
position: relative做复杂对齐），强行切 Flex 可能引发连锁样式问题
真正容易被忽略的是：很多开发者在调试时只检查 HTML 结构，却忘了确认父容器是否被其他规则（如 height: auto !important 或 min-height 覆盖）干扰了 clearfix 的生效。建议用浏览器开发者工具的「Computed」面板，逐层验证 ::after 是否渲染、是否设置了 clear 和 display。
