伪元素::after清除浮动时无尺寸，box-shadow无法渲染；应改用display: flow-root创建bfc使父容器获得真实高度，再统一加阴影，并通过css变量适配深色模式。
深色模式下伪元素清除浮动（::after）本身不渲染边框或阴影，所以你加了 box-shadow 也看不到——不是颜色没适配，是它根本没参与绘制。
为什么 ::after 清除浮动后加 box-shadow 无效
伪元素清除浮动（如 .clearfix::after）的核心作用是插入一个“看不见但占高度”的块级节点，靠 clear: both 拉高父容器。它的默认行为是：content: "" + display: table（或 block）+ clear: both。这个节点没有尺寸、没有背景、没有边框，更不会主动触发阴影绘制区域。
常见错误现象：
- 给 .clearfix::after 直接写 box-shadow: 0 2px 6px rgba(0,0,0,0.1)，DevTools 里能看到样式，但页面无效果
- 深色模式切换后父容器阴影突然消失，误以为是 color-scheme 或 @media (prefers-color-scheme: dark) 没覆盖到伪元素
-
::after默认height和width都是0，box-shadow必须依附于有 border box 的元素才能渲染 - 即使设了
height: 1px，若父容器overflow: hidden，阴影仍被裁剪（尤其深色模式常搭配紧凑 padding） - 伪元素不继承父级
color-scheme，但它也不需要——阴影颜色应由你显式定义，而非依赖系统主题自动映射
display: flow-root 是更优解，且天然兼容深色模式
与其给伪元素硬加阴影，不如让父容器自己“长出高度”，再统一加 box-shadow。现代方案中 display: flow-root 不仅语义清晰，还完全规避伪元素的渲染盲区问题。
它创建 BFC，包含浮动子元素，父容器获得真实高度，box-shadow 自然可画在 border box 外围——和深色模式无关，只和容器是否具备绘制上下文有关。
- 写法极简：
.parent { display: flow-root; box-shadow: 0 2px 6px var(--shadow-color, rgba(0,0,0,0.1)); } - 深色模式适配只需定义 CSS 变量：
:root { --shadow-color: rgba(0,0,0,0.1); } @media (prefers-color-scheme: dark) { :root { --shadow-color: rgba(255,255,255,0.15); } } - 注意：若父容器已设
position: absolute，display: flow-root会失效，此时必须用其他方式恢复高度（如显式min-height）
真要保留伪元素方案？必须显式赋予尺寸和绘制上下文
如果项目强依赖 clearfix（如需兼容 IE11），又确实需要阴影从“清除点”发出，则不能只靠 clear: both，得让伪元素变成一个有体积的载体。
- 必须设置尺寸：
height: 0; min-height: 1px;或padding-bottom: 4px;（值需 ≥ 阴影blur+v-offset） - 避免透明穿透：加
background: transparent;（某些浏览器对纯透明伪元素的阴影渲染不稳定） - 确保不被裁剪：父容器禁用
overflow: hidden；若必须用，至少加padding-bottom: calc(4px + 6px)（对应box-shadow: 0 4px 6px） - 深色模式下建议用变量控制颜色：
.clearfix::after { content: ""; display: block; clear: both; height: 0; min-height: 1px; box-shadow: 0 4px 6px var(--shadow-color); }
真正容易被忽略的是：伪元素清除浮动的本质是“补高”，不是“装饰”。给它加阴影，等于强行把它当成视觉组件来用——这违背了它的原始职责。优先用 display: flow-root，把高度逻辑和视觉表现解耦，才是深色模式下稳定、可维护的做法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
