17370845950

浮动导致父容器高度塌陷是因浮动元素脱离文档流；clearfix通过::after伪元素（content:"";display:table;clear:both）触发BFC并清除浮动；overflow:hidden虽可撑高但会裁剪溢出内容，不推荐通用；现代布局应优先使用flex或grid。

浮动元素导致父容器高度塌陷的典型表现

当子元素使用 float: left 或 float: right 后，父容器常常“看不见”它们的高度，表现为高度为 0、背景色不显示、后续元素上移。这不是 bug，是浮动脱离文档流的自然结果。

为什么 clearfix 伪元素能解决这个问题

核心在于触发父容器的 B

FC（块级格式化上下文），并用伪元素在末尾插入一个“视觉上不可见但参与布局”的清除节点。现代最稳妥的写法是：

.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 只认单冒号——这些细节一错，整个清除就失效。