.clearfix 是为解决浮动元素导致父容器高度塌陷而设计的css方案，通过伪元素插入并清除浮动，避免溢出裁剪等副作用，兼容性优于 display: flow-root。
清除浮动用 .clearfix，核心是为了修复父容器因子元素浮动而产生的高度塌陷问题。浮动元素会脱离文档流，不再参与父级高度计算，导致父级边框“缩成一条线”、背景消失、后续内容上移——.clearfix 就是专门为此设计的一套轻量、语义清晰、无需改动 html 结构的 CSS 解决方案。
为什么必须处理浮动导致的高度塌陷
当子元素设置 Float: left 或 float: right 后，它就从普通文档流中“抽离”，不再占据空间。父容器若没设固定高度，会按“内部无占位内容”来计算自身高度，结果变成 0。这时： – 父级边框看不见或只显示为细线 – 背景色/背景图不显示 – 后续兄弟元素会上浮到父级上方，布局错乱 – 响应式或 js 高度测量（如 offsetHeight）失效
clearfix 的工作原理
.clearfix 本质是利用伪元素（::after）在父元素末尾插入一个“看不见但起作用”的块级节点，并让它强制清除两侧浮动：
-
content: ""：生成一个空内容，确保伪元素存在 -
display: block：让伪元素成为块级，能独占一行并响应 clear -
clear: both：阻止该伪元素与任何浮动元素同行，从而把父容器的底部“拉下来” -
height: 0; visibility: hidden;（可选）：隐藏伪元素本身，不占视觉空间 -
zoom: 1（IE6/7 兼容）：触发 hasLayout，让老 IE 正确包裹浮动子项
为什么不用更简单的方法？比如 overflow:hidden
overflow: hidden 或 auto 确实能触发 BFC（块级格式化上下文），间接解决塌陷，但它有副作用：
- 内容溢出时会被裁剪（比如下拉菜单、tooltip、动画移出区域的部分）
- 滚动条意外出现（
overflow: auto在某些浏览器下会多出滚动条） - 不适用于需要 overflow-visible 的场景（如绝对定位弹层）
而 .clearfix 是精准干预——只影响浮动布局逻辑，不改变父容器的溢出行为或盒模型表现。
立即学习“前端免费学习笔记（深入）”；
现代替代方案：display: flow-root
CSS 新增的 display: flow-root 是更干净的替代品，它直接创建一个独立的 BFC 容器，天然包含浮动子元素，且无溢出裁剪风险：
.parent { display: flow-root; }
但它在 IE 和部分旧版 safari 中不支持，所以 .clearfix 仍是兼顾兼容性与可控性的首选实践。