浮动元素脱离文档流导致父容器高度塌陷，clearfix通过伪元素插入清除浮动的块级内容来修复，现代推荐display: flow-root或flex布局替代。
浮动元素脱离文档流，父容器高度塌陷是布局错乱的根源，clearfix 是最轻量、兼容性最好的修复方案。
为什么父容器高度会塌陷
当子元素使用 float: left 或 float: right 后，它不再参与父容器的高度计算，导致父容器“看不见”子元素，表现为高度为 0 —— 这就是塌陷。常见现象包括：背景色/边框消失、后续元素上移、margin 不生效。
解决思路不是强行设高（破坏响应式），而是让父容器“感知”到浮动子元素的存在。
clearfix 的标准写法与原理
clearfix 本质是利用伪元素在父容器末尾插入一个清除浮动的块级内容，从而撑开父容器。现代写法应兼顾 IE8+ 和 BFC 触发：
立即学习“前端免费学习笔记（深入）”；
.clearfix::after {
content: "";
display: table;
clear: both;
}
.clearfix {
*zoom: 1; /* IE7 hack */
}-
display: table比block更稳妥，避免某些浏览器中clear失效 -
*zoom: 1是 IE7 的 hasLayout 触发方式，无害且必要（若需支持 IE7） - 不要用
overflow: hidden替代 —— 它虽能触发 BFC，但会意外裁剪position: absolute子元素或阴影
哪些地方必须加 clearfix
只要父容器内存在浮动子元素，且你需要它正确包裹内容（比如导航栏、图文混排模块、卡片列表），就必须应用 clearfix。
- 常见误用：只给最外层
body或container加，漏掉中间嵌套的浮动容器 - 典型场景：
.nav内多个float: left的a标签；.article中图片左浮、文字绕排 - 注意：Flexbox 或 Grid 布局下无需
clearfix，浮动本身已退居次要地位
现代替代方案与取舍建议
如果项目已放弃 IE10 以下支持，可优先用更语义化、副作用更小的方式：
- 对父容器设
display: flow-root—— 专为解决此问题而生，无任何副作用，Chrome 58+/Firefox 53+ 支持 - 改用
display: flex并设flex-wrap: wrap，天然不塌陷，但需重构子元素排列逻辑 - 仍用
float时，clearfix仍是兼容性与可控性最优解，别为了“不用 float”而强行套用其他布局
真正容易被忽略的是嵌套浮动容器的逐层清理 —— 父容器清了，子容器里再浮动，还得再清一次，没有银弹，只有逐层确认。
