伪元素未渲染主因是content: ""缺失或错误，导致::after节点未生成；clear: both需配合display: table/block等块级显示才生效；现代推荐用display: flow-root替代clearfix。
伪元素没渲染，content: "" 缺失或写错
伪元素 ::after 不是“加了就生效”，它必须被浏览器真正生成出来。如果 content 属性缺失、写成 content: none、或值里带空格（如 content: " "），浏览器会跳过该节点——此时 display: table 和 clear: both 都无处依附。
检查方法：在 DevTools 的 Elements 面板中，展开父容器，看末尾是否真有 ::after 节点；没有，就是 content: "" 没生效。
-
content: ""必须显式写出，不能靠预处理器自动补全（某些 Sass 配置会删空 content） - 用
@supports或构建工具时，确认编译后 CSS 仍保留该行 - 别用注释代替，比如
/* content: "" */—— 注释不会触发渲染
display 值没设对，clear: both 失效
clear: both 只对块级元素起作用，而 ::after 默认是 inline 级别。即使写了 clear: both，浏览器也会忽略它。
常见错误写法包括：display: inline-block（可能因基线对齐导致高度异常）、display: inline（完全无效），或者干脆没写 display。
立即学习“前端免费学习笔记（深入）”；
- 推荐用
display: table：它天然触发 BFC，且在 IE8+ 更稳 - 也可用
display: block，但需额外加height: 0或font-size: 0避免空白行 - 若父容器本身是
inline（如span），必须先设display: inline-block或block，否则伪元素压根不渲染
父容器自身样式压制了清除效果
有些父容器的已有样式会让伪元素“存在但无效”：它渲染出来了，却撑不开高度。
典型干扰项：
-
overflow: hidden或overflow: auto：可能裁剪伪元素，尤其在缩放、transform或高 DPR 屏幕下 -
height、max-height或min-height显式设值：会锁死高度，清除再成功也撑不开 -
position: absolute或fixed：父容器已脱离文档流，内部clear对子项不再起作用 -
display: flex或display: grid：浮动子元素自动退化，.clearfix不仅无效，还可能引入 margin 折叠异常
现代项目里最容易被忽略的一点
你可能根本不需要清除浮动——尤其是当父容器已经用了 display: flex 或 display: grid，或者你正在动态插入内容。
display: flow-root 是专为此设计的原生方案，一行代码、零副作用，且 Chrome 64+/Firefox 58+/Safari 15.4+ 全支持。但它只在直接包裹浮动子项的父容器上生效，嵌套结构仍需逐层处理；而且，如果父容器已被其他布局方式接管，硬加 flow-root 可能覆盖原有行为。
