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