伪元素清除浮动必须同时满足三个条件：content: ""（非none）使::after节点存在，display: table（非block/inline-block）触发BFC并参与布局，clear: both（作用于块级伪元素）使其落到浮动下方；缺一不可。
content: "" 是伪元素渲染的硬门槛，不是可选配置
浏览器根本不会生成 ::after 节点，除非你显式写了 content 且值非 none。漏掉这行，display: table 和 clear: both 全部失效——不是“没效果”，是压根没这个元素。
常见错误写法包括：
-
content: none→ 浏览器直接跳过该伪元素 -
content:（无引号、无值）→ CSS 解析失败，整条声明被丢弃 -
content: " "（空格）→ 可能引入不可见字符，干扰行高或边框对齐 - 用预处理器（如 Sass）时，某些压缩配置会自动删掉
content: ""→ 编译后就没了
为什么不能用 display: block 替代 display: table？
display: block 确实能让 clear: both 生效，但它不自动创建 BFC，在 IE8/9 或老版 Safari 中容易因外边距合并（margin collapse）导致撑高失败；而 display: table 天然触发匿名 BFC，不继承 line-height，也不受空白符影响，兼容性更稳。
特别注意：
立即学习“前端免费学习笔记（深入）”；
-
display: inline-block绝对不用——它会引入基线对齐问题，且在部分上下文中无法正确参与清除计算 - 父容器若已设
overflow: hidden或display: flow-root，再加::after属于冗余，甚至可能引发裁剪或定位异常
clear: both 必须作用于块级伪元素，否则无效
clear: both 对行内元素不起作用。而 ::after 默认是 inline 级别，即使写了 clear: both，浏览器也会忽略它。所以必须配一个能参与块级布局的 display 值。
验证是否生效的方法很直接：
- 打开 DevTools → Elements 面板 → 找到目标父容器 → 展开看末尾有没有
::after节点 - 没出现 =
content缺失或被删了 - 出现了但没撑高 =
display值不对，或父容器自身有position: absolute/overflow干扰
加在哪个父容器上才有效？
必须加在「直接包裹浮动子项」的父元素上。比如 HTML 是 <div class="wrapper"><div class="row"><div style="float:left"></div></div></div>，那 .clearfix 要加在 .row 上，不是 .wrapper。
其他高频错位场景：
- 父容器本身是
position: absolute或fixed→clear对脱离文档流的容器无效 - 全局样式里写了
*::after { display: none }→ 直接干掉所有伪元素 - 父容器用了
display: flex或grid→ 浮动本就不该在这种上下文中使用，clear已无意义
content: "" 让节点存在，display: table 让它参与布局，clear: both 让它落到浮动下方。少一个，整个链条就断了。 
