只写content: ""的::after没效果是因为伪元素未渲染，必须显式声明content: ""才能触发渲染；display: table比block更稳因其天然创建bfc、避免外边距合并；必须加在直接包裹浮动子项的父容器上。
为什么只写 content: "" 的 ::after 没效果？
因为浏览器根本不渲染伪元素——content 是强制属性，缺了它，::after 就是“不存在”，后续的 display 和 clear 全部失效。常见翻车点包括：content: none、content: " "（带空格）、或直接省略该声明。
必须严格写成：content: ""。哪怕值为空字符串，浏览器也会生成一个不可见但参与布局的节点。
display: table 为什么比 display: block 更稳？
display: table 天然创建匿名 BFC，不继承 line-height、不触发外边距合并、也不响应 vertical-align，对周边布局零侵入。而 display: block 在以下场景容易出问题：
- 父容器设了
font-size: 0或嵌套在inline-block中时，block伪元素可能因行高继承产生意外间隙 - 父容器有
margin-bottom，block会与之发生外边距合并，导致撑高失效 - IE8/9 下，
block + clear: both可能多出 1px 高度
所以标准写法始终优先用：display: table。
加在哪个容器上才真正起作用？
必须加在「直接包裹浮动子项」的父元素上。加错层级等于白写：
- HTML 是
<div class="wrap"><div class="inner"><div style="float:left"></div></div></div>→.clearfix要加在.inner上，不是.wrap - Vue/React 中，别加在组件根节点（如
<div class="card">），而应加在模板里那个明确包裹 <code>v-for浮动项的<div> <li>如果父容器已设 <code>overflow: hidden、display: flow-root或position: absolute，再加::after属于冗余，还可能因 BFC 重叠导致裁剪或定位异常 - 父容器是
display: flex或display: grid—— 浮动在这些上下文中本就失效，clear无意义 - 父容器设了
height或max-height—— 伪元素无法突破固定高度，撑不开 - 父容器用了
transform、filter或contain: layout—— 这些会创建新的层叠上下文，可能隔离clear行为 - CSS-in-JS 环境中类名被哈希化，
.clearfix选择器可能不匹配，建议改用属性选择器（如[data-clear]）或封装为组件逻辑
哪些情况根本不该用 ::after 清浮动？
强行套用反而引入新问题：
真正容易被忽略的，不是怎么写这三行 CSS，而是你没确认：父容器是否还在正常文档流里、有没有别的样式（比如全局 *::after { display: none }）悄悄干掉了伪元素、以及——你是不是还在用 float 做整体布局。
