clearfix是通过伪元素触发BFC并清除浮动的通用方案，比overflow:hidden更安全，适用于传统浮动布局中父容器高度塌陷问题。
为什么父容器高度会塌陷
浮动元素脱离文档流，父容器在计算高度时“看不见”它们，导致 height 变成 0 或仅包裹非浮动内容。这不是 bug，是 CSS 浮动的原始设计行为——但实际布局中它常让背景、边框、后续元素错位。
clearfix 是什么，为什么用它而不是 overflow: hidden
clearfix 是一套通过伪元素触发 BFC 并清除浮动的通用方案，比直接设 overflow: hidden 更安全：
-
overflow: hidden会意外裁剪溢出内容（比如下拉菜单、阴影、transform 位移） -
overflow: auto在某些浏览器可能添加无用滚动条 -
clearfix仅作用于浮动上下文，不影响其他渲染逻辑
现代推荐写法（兼容 IE8+）：
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
什么时候必须加 clearfix
当父容器内有 float: left 或 float: right 子元素，且你依赖该父容器的视觉高度（比如带背景色、边框、margin-bottom 间距）时就需要。常见场景包括：
- 导航栏用浮动排列
，但外层没高度，背景不显示 - 图文混排中图片左浮，文字环绕，但父
高度塌陷，下方内容上移 - 响应式栅格中部分列使用浮动，但容器无法自适应高度
注意：Flexbox / Grid 布局天然不触发此问题，clearfix 仅用于传统浮动布局。
容易忽略的细节和兼容性坑
IE6/7 不支持 ::after 伪元素，老项目若需兼容，得用 :after（单冒号）并配合 zoom: 1 触发 hasLayout：
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
另外两个关键点：
- 必须给父容器加
class="clearfix"，不能只写伪元素规则而不应用类名 -
content: ""缺失会导致清除失效——这是最常被复制粘贴遗漏的一行 - 如果父容器本身设置了
height或min-height，clearfix不会覆盖这些显式值
真正麻烦的从来不是加不加 clearfix，而是忘记它只对「浮动」有效——如果你用的是 position: absolute 或 display: inline-block，它完全不起作用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
