根本原因是浮动元素未创建层叠上下文，其box-shadow绘制在父容器层叠上下文中且层级低于后续兄弟元素；需通过position+ z-index或强制创建新层叠上下文解决。
浮动元素的 box-shadow 被相邻元素遮挡，根本原因不是“阴影画错了”，而是它被画在了错误的层叠上下文（stacking context）里——阴影本身没被裁掉，只是被盖住了。
浮动元素不自动创建层叠上下文
普通浮动元素（float: left 或 float: right）不会触发新的层叠上下文。它的 box-shadow 默认绘制在**父容器的层叠上下文中**，且层级低于后续的、未浮动的兄弟块级元素（比如紧挨着的 <p></p> 或 <div>）。浏览器按文档流顺序渲染：浮动元素先画，后面兄弟元素后画、后盖，阴影自然被压在底下。
<ul>
<li>检查 computed styles 中的 <code>z-index：浮动元素若没设 position，z-index 无效，无法提升层级
z-index: 1，也必须配合 position: relative 或 absolute 才生效float 和 position: absolute 共存时，float 失效，布局逻辑会变，慎用父容器没设 position:relative，导致 z-index 无锚点
给浮动子元素设 position: relative; z-index: 2 是常见解法，但前提是它的**直接父容器有明确的定位上下文**（即父容器至少是 position: relative 或 static 以外的值）。如果父容器是 position: static（默认），子元素的 z-index 会向上查找最近的非-static 祖先；找不到就落到根层叠上下文，极易被同级内容覆盖。
- 快速验证：给父容器加
position: relative，再给浮动子元素加position: relative; z-index: 2 - 避免对父容器加
z-index：除非必要，否则可能意外改变整个子树的层叠顺序 - 如果父容器本身是 flex/grid 容器，它默认创建独立层叠上下文，此时子元素
z-index只在该容器内生效，更可控
相邻元素用了 transform 或 opacity，悄悄抬高了层级
哪怕相邻元素只是加了 transform: translateY(0) 或 opacity: 0.99，也会隐式创建新的层叠上下文，并且这个上下文的层级**高于**普通文档流中的浮动元素（即使后者有 z-index）。这是最隐蔽的遮挡来源。
- 用开发者工具的 Layers 面板或 Elements → Styles → “Computed” 查看
layer和stacking context字段 - 临时删掉相邻元素的
transform、opacity、filter，看阴影是否立刻可见 - 若必须保留这些属性，可让浮动元素所在容器也加
transform: translateZ(0)，强制它升级为独立层叠上下文，再靠z-index控制相对顺序
真正卡住人的，往往不是“怎么让阴影露出来”，而是忘了查相邻元素有没有偷偷创建更高层级的上下文——尤其当它们只加了一行 will-change: transform 或 backface-visibility: hidden 时，阴影就无声无息地沉底了。
