浮动元素脱离文档流导致父容器高度塌陷；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。