会，而且是必然裁切——只要父容器设了overflow:hidden（或auto、scroll）且其祖先position不是static，box-shadow就会被物理裁掉；这是bfc规范行为，非浮动导致，验证方法是将overflow临时改为visible，阴影即恢复。
会，而且是必然裁切——只要父容器设了 overflow: hidden（或 auto、scroll），且其某个祖先 position 不是 static，box-shadow 就会被物理裁掉。这不是浮动导致的，而是 overflow: hidden 自身的规范行为。
为什么 overflow: hidden 一定会裁 shadow，和 float 无关
浮动元素本身不创建层叠上下文，也不会直接触发裁剪；真正起作用的是父容器的 overflow: hidden ——它会强制触发 BFC（块级格式化上下文），而 BFC 的硬性规则之一就是「所有内容不得溢出其 padding box 内边缘」。box-shadow 绘制在 border box 外，但浏览器只允许它出现在 padding box 范围内；超出部分不是“没渲染”，是刚画出来就被裁掉了。
常见验证方式：
- 打开开发者工具，选中带阴影的元素
- 逐层向上检查 computed 样式中的 overflow 和 position
- 把任意一层祖先的 overflow 临时改为 visible，阴影立刻完整出现 → 就坐实了问题根源
float 只是让问题更隐蔽的诱因
浮动元素脱离文档流，导致父容器高度塌陷（offsetHeight === 0），此时即使加了 box-shadow，也因为没有“可挂载的高度”而视觉上只剩顶部一截。开发者常下意识加 overflow: hidden 来“清浮动”撑高容器，结果阴影刚被撑出来，又立刻被裁掉。
- 现象：卡片 hover 后阴影只显示上半部分，底部消失
- 原因链：
float→ 父容器塌陷 → 加overflow: hidden撑高 → 阴影被裁 - 别用
min-height: 1px或margin补救：前者在某些 Android WebView 下不可靠，后者不解决裁剪本质
display: flow-root 是比 overflow: hidden 更干净的替代方案
display: flow-root 同样能解决浮动导致的高度塌陷（它也触发 BFC），但关键区别在于：它不附带裁剪副作用。阴影、绝对定位下拉菜单、transform 位移内容全部正常渲染。
使用时注意：
- 它和 position: absolute 不能共存于同一元素，后者会让前者失效
- 兼容性：Chrome 64+、Firefox 59+、Safari 15.4+、Edge 79+ 支持；IE11 完全不支持，需回退到伪元素 clearfix
- Flex/Grid 容器里设 flow-root 依然有效，且不会干扰 gap 或轨道计算
加 padding 是缓兵之计，但必须算准值
加 padding 能让阴影“落进” padding box 区域，从而避开裁剪，但它不是修复，只是预留空间。生效前提是：
- padding 值 ≥ blur-radius + abs(offset-y) + spread-radius 三者最大值 + 2–4px 余量
- 父容器未因 transform、opacity、will-change 隐式创建新层叠上下文（Safari 尤其敏感）
例如：box-shadow: 0 4px 12px rgba(0,0,0,0.15) → 至少要 padding: 16px（12 + 4）；若还带 spread-radius: 2px，就得 padding: 18px 以上。
真正卡住人的，往往不是“怎么加 padding”，而是忘了检查：父容器是否同时设置了 max-height 锁死高度、是否用了 transform: translateZ(0) 意外创建裁剪上下文、或者图片加载延迟导致初始高度为 0 —— 这些都会让 padding 白加。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
