.clearfix::after必须写content: ""、display: table、clear: both三行，缺一不可：content: ""触发伪元素实例化，无此声明则节点不渲染；display: table创建bfc并稳定撑高；clear: both强制伪元素落于浮动项下方以撑开父容器。
为什么 .clearfix::after 必须写 content: ""、display: table、clear: both
漏掉任何一行，伪元素就无法生效——不是“效果不好”，而是压根没渲染出来。content: "" 是触发伪元素实例化的硬门槛；浏览器对 ::after 的渲染规则很死：没有非空 content，整个伪元素节点被忽略，后续样式全失效。写成 content: none 或 content: ; 都不行。display: table 比 display: block 更稳，它天然创建 BFC，不继承 line-height，也不受外边距合并影响；而 clear: both 才是真正起清除作用的部分，它让伪元素强制落到所有浮动项下方，从而撑开父容器底部。
.clearfix 应该加在哪个父元素上
必须加在「直接包裹浮动子项」的父元素上，多一层或少一层都无效：
- HTML 是
<div class="outer"><div class="inner"><div style="float:left"></div></div></div>→.clearfix要加在.inner上，不是.outer - Vue/React 中，别加在组件根节点（如
<div class="my-component">），而应加在模板里那个明确包裹 <code>v-for或map出来的浮动项的<div> <li>如果父容器本身已设 <code>overflow: hidden、display: flow-root或float，它已在 BFC 中，再加.clearfix属于冗余，还可能意外裁剪position: absolute的下拉菜单 - 父容器是
position: absolute或fixed→clear: both对脱离文档流的容器无效 - 父容器设了
height或max-height→ 伪元素撑不开固定高度，清浮动失去意义 - 父容器用了
contain: layout、transform或filter→ 这些会创建新层叠上下文，可能隔离clear行为 - CSS-in-JS 环境（如 styled-components）中，类名哈希化后
.clearfix可能不匹配，建议改用属性选择器或内联样式 - 全局写了
*::after { display: none }→ 直接干掉所有伪元素，包括你的::after -
display: table天然生成匿名表格单元格，BFC 触发更可靠，IE8+ 兼容性好 -
display: block需额外注意：若父容器有 margin，可能与伪元素发生外边距合并，导致“看不见”的撑高；若必须用，建议补height: 0; visibility: hidden; - 别用
display: flex或display: grid→ 它们会改变伪元素的布局上下文，clear: both直接失效 - 现代项目若无需兼容 IE11 及更早版本，可直接用
display: flow-root替代，更干净
哪些场景下 ::after 清浮动会失效
不是所有地方都能靠 ::after 安全收场，关键看父容器是否处于更复杂的布局上下文：
display: table 和 display: block 怎么选
优先用 display: table，尤其当项目需兼容旧环境：
真正容易被忽略的点在于：你是不是还在用 float 做整体布局？::after 是修浮，不是治本。如果结构允许，display: flex 或 display: grid 能从根本上绕过塌陷问题——但只要还有图文环绕、老式栅格或兼容需求，.clearfix::after 就仍是那个最可控、最易调试的“空气脚垫”。
