必须逐层加.clearfix，因为浮动影响不会自动被父容器拦截，若中间某层未创建BFC或清除浮动，塌陷会逐级向上传导；例如.article→.quote-box→.avatar-float-left中，仅在.article加.clearfix无法阻止.quote-box自身塌陷，导致高度计算失真。
为什么逐层加 .clearfix 而不是只加最外层
因为浮动元素脱离文档流后，其影响会“穿透”中间未隔离的父容器——只要某一层没创建 BFC 或没清除浮动，它就无法兜住子级浮动，导致高度塌陷逐级向上传导。比如 .article → .quote-box → .avatar-float-left，若只在 .article 上加 .clearfix，.quote-box 仍会塌陷，进而让 .article 的高度计算失真。
常见错误现象：.quote-box 边框看不见、背景色不显示、后续兄弟元素上移贴顶。
- 必须显式给每一级需要包裹浮动的容器加
.clearfix类，不能依赖继承或“父包子”假设 - 尤其 CMS 类系统中，内容模板嵌套深、组件复用多，
.clearfix是唯一可预测、可调试的控制点 - SCSS 推荐封装为混合宏：
@mixin clearfix { &::after { content: ""; display: block; clear: both; } }，避免手写重复
.clearfix::after 必须放 ::after，不能放 ::before
放在 ::before 会导致清除行为发生在所有子内容之前，对撑开父容器高度完全无效——因为浮动元素还在后面“悬空”，::before 清的是它上面并不存在的浮动。
::after 插入在所有子元素末尾，clear: both 强制它换行到底部，从而把父容器高度拉伸到包含全部浮动元素。
立即学习“前端免费学习笔记（深入）”；
-
::before在经典 clearfix 中仅用于防止顶部 margin collapse，和清除浮动无关 - 现代精简写法只需
.clearfix::after { content: ""; display: block; clear: both; }，IE8+ 兼容 - 若父容器设了
font-size: 0或极小line-height，伪元素可能因默认 inline 行为导致高度异常，此时显式加display: block比display: table更稳妥
父容器已触发 BFC 时，.clearfix 反而有害
如果父元素本身有 overflow: hidden、display: flex、display: grid 或 position: absolute，它已经隐式创建了块级格式化上下文（BFC），再叠加 .clearfix 不仅多余，还可能引入副作用：伪元素带来的意外 margin、line-height 抖动，或与 JS 动态高度计算冲突。
- 先检查父容器是否已有 BFC 触发属性，可用浏览器开发者工具的“Computed”面板看
display和overflow值 - 确认已触发 BFC 后，直接删掉
.clearfix类 - 现代项目优先用
display: flow-root替代，一行解决，无伪元素、无副作用，Chrome 64+/Firefox 58+/Safari 12.1+/Edge 79+ 均支持
嵌套过深时，高度抖动的真实原因常不是 clearfix 失效
所谓“父容器高度忽大忽小”，多数不是 .clearfix 没起作用，而是浮动子元素内部发生了重排：图片加载完成、字体回流、JS 插入内容、甚至 vertical-align 变化，都会让父容器反复重算高度。
- 给含图片的浮动元素设
min-height或用aspect-ratio/padding-bottom预留空间 - 避免在浮动元素内混用
vertical-align: middle和行内元素，基线跳变极易引发视觉抖动 - 若用 JS 读取
offsetHeight或触发强制同步布局（如getComputedStyle），需确保在浮动元素稳定后再执行
display: flex 或 display: grid 替代浮动主导的结构，把清除浮动当作过渡期的补丁，而非长期依赖的解法。 
