clear: both 必须加在 ::after 上，因为 clear 只对非浮动的块级兄弟元素生效，浮动元素自身已脱离文档流，无法被清除；::after 伪元素通过 content: ""、display: table 和 clear: both 满足条件，作为块级非浮动元素强制下移，撑开父容器高度。
clear: both 为什么必须加在 ::after 上，而不是浮动元素自己身上
因为 clear 属性只对「非浮动的块级兄弟元素」生效，它不是用来“修复”浮动的开关。你给 .item { float: left; clear: both; } 加这个声明，浏览器直接忽略——浮动元素已脱离文档流，clear 的计算逻辑压根不作用于它自身。
真正起效的位置是：浮动元素之后、同级的、块级的、非浮动的元素。而 ::after 伪元素恰好能被浏览器当作这样一个元素来处理，前提是它满足三个硬性条件：
-
content: ""—— 没这句，伪元素根本不生成，后续样式全白搭 -
display: table—— 创建 BFC，避免 margin 合并干扰高度计算；用block则得额外加height: 0和visibility: hidden -
clear: both—— 强制该伪元素落到所有浮动元素下方，从而把父容器底部“顶”开
为什么不能只写 clear: both，漏掉 content 或 display
漏掉 content: "" 是最常见翻车点：DevTools 里看不到 ::after，computed styles 中 content 值为 none，整个清除逻辑就断了。写成 content: " "（带空格）会引入不可见行高，可能撑出意外间隙。
display: table 不是可选项——它比 block 更稳：天然创建匿名 BFC，不继承 line-height，也不参与外边距合并。如果只写 clear: both + display: block，在某些字体或行高设置下，伪元素可能无法可靠撑开父容器高度。
clear: both 在 ::after 里到底清的是什么
它不清浮动本身，也不改变子元素的 float 状态。它只是让这个伪元素「避开上方所有浮动兄弟」，强制落到底部。父容器因此获得一个真实参与高度计算的块级节点，高度才得以恢复——背景色、边框、内边距才能正常显示。
注意：clear: both 是唯一能同时应对 float: left、float: right、混用浮动的取值。如果只写 clear: left，而布局里恰好有右浮侧边栏，伪元素可能卡在右侧浮动旁边，清除失效。
哪些地方加了 ::after + clear: both 反而坏事
不是所有父容器都适合套 .clearfix::after：
- 父容器已设
overflow: hidden或display: flow-root—— 它本身就在 BFC 中，再加伪元素冗余，还可能裁剪position: absolute下拉菜单 - 父容器是
display: flex或display: grid—— 浮动在 flex/grid 子项中本就失效，清除逻辑无意义 - 父容器是
position: absolute或fixed—— 伪元素的clear对脱离文档流的父容器无效 - 父容器已设
height或max-height—— 伪元素撑不开高度，清浮动失去意义
真正容易翻车的，从来不是代码怎么写，而是你没意识到：父容器是否还在文档流里、有没有别的样式偷偷覆盖了 ::after、以及——你是不是还在用 float 做整体布局。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
