父容器box-shadow不显示，八成是高度塌陷了浮动元素；浮动使子元素脱离文档流，导致父容器高度为0，box-shadow无绘制区域；可通过overflow:hidden或display:flow-root触发BFC恢复高度。
父容器box-shadow不显示，八成是高度塌陷了
浮动元素（float: left 或 float: right）会脱离文档流，导致父容器在计算 offsetHeight 时完全忽略它们。结果就是：父容器视觉上“空着”，getComputedStyle(el).height 返回 0px，而 box-shadow 只能在有实际尺寸的 border box 外围绘制——没高度，就没阴影落点。
常见现象包括：
- 开发者工具中高亮父容器，只看到一条细线甚至不可见
-
box-shadow: 0 4px 12px rgba(0,0,0,0.15)只显示顶部 2–3px，下半截消失 - 临时把父容器
overflow改成visible，阴影立刻完整出现
用 overflow: hidden 最快，但得防裁剪
它通过触发 BFC 让父容器重新包含浮动子元素，高度恢复正常，是 IE8+ 全兼容方案。但它副作用明确：所有超出 border box 的内容（含 box-shadow、border-radius 圆角溢出、position: absolute 子项）都会被硬裁掉。
实操要点：
立即学习“前端免费学习笔记（深入）”；
- 若父容器本身不需要横向滚动或内容溢出可见，
overflow: hidden是最快解法 - 若需保留溢出内容，改用
overflow: auto（注意滚动条可能意外出现） - 别指望靠加
margin补偿——溢出部分仍被裁，必须扩大“可绘制区域”本身 - 给父容器加
padding可缓解裁剪，但需满足：padding ≥ blur-radius + abs(offset-y)（例如0 4px 12px至少要padding: 8px）
display: flow-root 是更干净的现代解法
这是 CSS 新增的专门用于创建 BFC 的值，语义清晰、无裁剪副作用，比 overflow 更精准。
优势与限制：
- Chrome 64+、Firefox 64+、Safari 15.4+、Edge 79+ 支持；IE 完全不支持
- 不会裁剪内容，也不会影响
position: absolute子项的正常溢出 -
display: flow-root和position: absolute不能共存于同一元素，后者会让前者失效 - 老项目需回退：用
overflow: hidden+ 足够padding缓冲区
闭合浮动后阴影还是不全？检查这些隐性压制
即使高度恢复了，阴影仍可能不可见——因为还有其他规则在暗中压制渲染区域：
-
max-height或height锁死父容器高度，浮动撑开后被截断 - 父容器或祖先元素用了
transform（哪怕只是translateZ(0)），意外创建裁剪上下文（Safari 尤其敏感） - 图片加载延迟导致初始高度为 0，JS 动态插入内容后未触发重绘
- 父容器同时设了
will-change: transform或clip-path，隐式限制绘制边界
真正卡住人的，往往不是“怎么让阴影出来”，而是忘了检查这些叠加压制。修复完浮动塌陷后，务必用开发者工具确认父容器的 offsetHeight 和 computed height 是否已非零，再逐条排查渲染上下文干扰。
