父容器box-shadow不可见的根本原因是高度塌陷，即浮动元素脱离文档流导致父容器计算高度时忽略它们，使offsetheight为0或极小，阴影无渲染区域；解决方法包括overflow:hidden触发bfc、padding缓冲或display:flow-root。
外层容器 box-shadow 看不见，八成不是阴影没生成，而是容器本身“没高度”——浮动元素脱离文档流，父容器计算高度时直接忽略它们，offsetHeight 常为 0 或仅含行高，阴影自然无处可落。
父容器高度塌陷是根本原因
浮动元素（float: left 或 float: right）会脱离文档流，导致父容器在计算自身高度时完全不把它们算进去。结果就是：容器视觉上空着、getComputedStyle(el).height 返回 0px、el.offsetHeight 极小。而 box-shadow 只能绘制在有实际尺寸的 border box 外围，没高度 = 没渲染区域 = 阴影不可见。
常见现象：
- 父容器加了
box-shadow: 0 4px 12px rgba(0,0,0,0.15)，但只看到顶部 2–3px，下半截消失 - 用开发者工具选中父容器，高亮区域几乎是一条线，甚至完全不可见
- 临时把父容器
overflow改成visible，阴影立刻完整出现
overflow: hidden 能撑高但会裁剪阴影
它通过触发 BFC 让父容器重新包含浮动子元素，高度恢复正常，是最兼容的解法（IE8+ 都支持）。但副作用极强：overflow: hidden 会硬裁掉所有超出 border box 的内容，包括 box-shadow。
实操要点：
- 若父容器本身不需要横向滚动或内容溢出可见，
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子项仍可正常溢出） - 和
position: absolute不能共存于同一元素，后者会让flow-root失效 - 老项目需回退：用
overflow: hidden+ 足够padding缓冲区
真正卡住人的往往不是浮动本身
即使闭合了浮动，阴影仍可能不可见——因为还有其他规则在暗中压制容器的渲染区域：
-
max-height或height锁死高度，浮动撑开后被截断 - 父容器或祖先元素用了
transform，意外创建了裁剪上下文（尤其 Safari） - 图片等资源加载延迟，导致初始高度为 0，阴影首次渲染失败
- 设置了
will-change或opacity ，隐式创建新层叠上下文，阴影被关在里面
查问题时，先确认容器真有高度，再检查它是否被其他规则悄悄“封口”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
