父容器高度塌陷导致阴影无处可落

box-shadow 绘制在元素 border box 外围，但前提是父容器有真实高度。浮动元素（float: left 或 float: right）脱离文档流，父容器计算高度时直接忽略它们——结果 offsetHeight 和 computed height 常为 0 或仅含行高。阴影没地方“挂”，自然只显示上半截甚至完全不可见。

overflow: hidden 能撑高但会裁剪阴影

它通过触发 BFC 让父容器重新包含浮动子元素，高度恢复正常，但副作用是：所有超出 border-box 的内容（包括 box-shadow）都会被硬裁掉。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 常见现象：box-shadow: 0 4px 12px rgba(0,0,0,0.15) 只显示顶部 2–3px，下半截消失
• 临时验证：把父容器 overflow 改成 visible，阴影立刻完整出现
• 不能靠加 margin 补偿——溢出部分仍被裁，必须扩大“可绘制区域”

display: flow-root 是更干净的解法

它专为解决高度塌陷设计，同样触发 BFC，但不附带裁剪行为：绝对定位子元素、阴影、圆角、滚动条全部照常工作。

• 兼容性已足够：Chrome 64+、Firefox 62+、Safari 15.4+、Edge 79+
• 写法简单：.parent { display: flow-root; }
• 注意：display: flow-root 和 position: absolute 不能共存于同一元素，后者会让前者失效
• IE 完全不支持，老项目需回退到 overflow: hidden + zoom: 1

padding 缓冲区只在特定条件下生效

给父容器加 padding 能让阴影落在内边距区域内，从而避开 overflow: hidden 的裁剪边界，但它不是万能补丁。

• padding 值至少要 ≥ blur-radius + abs(offset-y)（例如 0 4px 12px 至少要 padding: 8px）
• 若父容器同时有 transform 或 will-change，可能隐式创建新层叠上下文，padding 区域也会被裁（Safari 尤其敏感）
• flex/grid 容器里加 padding 可能干扰轨道计算，优先考虑改用 align-items: start + min-height

真正卡住人的，往往不是“怎么让阴影出来”，而是忘了检查父容器是否还被其他规则压制：比如 max-height 锁死高度、transform 意外创建裁剪上下文、或者图片加载延迟导致初始高度为 0。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！