根本原因是父容器高度塌陷且overflow:hidden双重作用导致阴影被裁；应优先用display:flow-root替代overflow:hidden以创建bfc并避免裁剪，兼容chrome64+等现代浏览器。
浮动后模块阴影被裁掉，根本原因不是阴影没生成，而是父容器高度塌陷 + overflow: hidden 双重作用导致阴影落点被剪掉。直接加 padding 可能见效，但容易踩坑——得先确认裁剪源在哪一层。
为什么浮动模块的 box-shadow 会消失
浮动元素脱离文档流，父容器高度塌陷为 0，box-shadow 没有渲染基础；更常见的是，开发者为“清浮动”在父容器加了 overflow: hidden，而这个属性会严格裁剪超出 padding-box 的所有像素——包括阴影。
- 阴影绘制在
border-box外，但overflow: hidden的裁剪边界在padding-box内侧 - 如果父容器还带
transform、opacity或will-change，它可能隐式创建新层叠上下文，让padding也失效 - 用开发者工具检查 computed 样式，重点看父级链上哪一层的
overflow是hidden或auto，且position不是static
优先改用 display: flow-root 替代 overflow: hidden
这是最干净的解法：它能创建 BFC 包含浮动子元素、恢复父容器高度，同时不裁剪任何溢出内容（下拉菜单、阴影、transform 偏移都安全）。
- 只需把父容器的
overflow: hidden换成display: flow-root - 兼容性：Chrome 64+、Firefox 53+、Safari 15.4+、Edge 79+；IE 全不支持
- 若需兼容旧版 Safari（overflow: auto 替代，但要加
max-height: none防滚动条误触发 - 别在
flow-root容器里再设height或max-height，否则可能压制浮动子元素撑起的高度
必须加 padding 时，怎么算才不白加
加 padding 不是修复 bug，是给阴影预留物理空间。它只在父容器没隐式创建新层叠上下文时有效。
-
padding值至少取blur-radius + abs(offset-y)的较大值，再加 2–4px 余量（例如box-shadow: 0 4px 12px rgba(0,0,0,0.15)→ 建议padding: 16px） - 若模块用了
width: 100%或grid-column: span 2，必须同步设box-sizing: border-box，否则内容会被挤出 - 在 Flex/Grid 容器内对 item 加
padding可能干扰轨道计算，此时优先用align-items: start+min-height: 1px腾空间 - Safari 对
padding生效极其敏感：若 computed 样式里padding尺寸没变，说明某层祖先已创建新层叠上下文（比如transform: translateZ(0)），得换伪元素方案
终极兜底：用伪元素模拟阴影
当父级链太深、overflow 和 transform 交错出现，或需要兼容老浏览器时，把阴影逻辑从主元素抽离到 ::before 最稳。
- 主元素只负责定位和尺寸，
::before绝对定位、inset: 0、transform: translateZ(0)触发独立合成层 - 避免在
flex或griditem 上直接加box-shadow，它可能干扰轨道计算；伪元素则完全绕过布局影响 - 不用
filter: drop-shadow()——Safari 对它的垂直方向裁剪极激进，哪怕阴影本身在视口内，只要元素top: -Xpx或transform: translateY(-Xpx)，就可能被提前切掉 - 伪元素方案唯一代价是多一个渲染层，但换来的是可预测性和跨浏览器一致性
真正容易被忽略的是：阴影消失从来不是单一问题。它可能是父容器塌陷、某层祖先 overflow 截断、层叠上下文干扰、甚至 box-sizing 错配共同导致的。别只盯着模块本身加样式，先用开发者工具逐层关掉 overflow，看哪一层松手阴影就回来——那才是真正的裁剪源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
