overflow: hidden 既撑高容器又裁剪阴影，因其触发bfc解决高度塌陷，同时严格裁剪超出padding box的区域（含box-shadow）；display: flow-root是无裁剪副作用的替代方案。
overflow: hidden 为什么既撑高容器又裁剪阴影
因为 overflow: hidden 触发 BFC 的同时，也严格限定了元素的「绘制边界」——它裁剪的是整个 padding box 的外缘，而 box-shadow 默认渲染在 border box 之外，自然被一并切掉。这不是 bug，是规范行为：浏览器不区分“该裁什么”，只要超出 padding box 就剪。
常见现象：box-shadow: 0 4px 12px rgba(0,0,0,0.15) 加在卡片上，父容器一设 overflow: hidden，底部阴影就只剩 1–2px；用开发者工具看 computed 样式，border-box 高度正常了，但阴影区域被硬截断。
-
overflow: hidden解决的是高度塌陷，不是“清除浮动”本身；它只是副作用触发了 BFC - 阴影是否可见，取决于它落点是否在 padding box 内；否则哪怕高度算对了，也没地方画
- Chrome/Edge 表现较一致；Firefox 在某些嵌套
position: relative场景下可能仍裁，Safari 对transform更敏感，容易扩大裁剪范围
display: flow-root 是更干净的替代方案
display: flow-root 同样触发 BFC、包含浮动子元素、恢复父容器高度，但关键区别在于：它不附带任何裁剪逻辑——box-shadow、::before、绝对定位弹层全部照常渲染。
写法极简，无副作用：
.card-container {
display: flow-root;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
- 兼容性已足够：Chrome 64+、Firefox 62+、Safari 15.4+、Edge 79+
- 不能和
position: absolute共存于同一元素；若已有position声明，需抽离出 wrapper - IE 完全不支持；老项目可回退到
overflow: hidden+padding缓冲组合
加 padding 能绕过裁剪，但值必须算准
给父容器加 padding 的本质，是把阴影“挪进”可绘制区域：只要阴影最大外延 ≤ padding 值，它就能落在 padding box 内，逃过 overflow: hidden 的刀。
错误做法是随便写 padding: 8px；正确算法是：
- 取
abs(v-offset) + blur-radius + spread-radius的最大值（例如0 4px 12px 0→ 至少padding: 16px） - 四边都有阴影？用
padding: 16px；只底部有？优先padding-bottom: 16px - 若卡片用了
width: 100%或grid-column: span 2，必须同步加box-sizing: border-box，否则内容被挤 - Flex/Grid 容器中加
padding可能干扰轨道计算；此时改用gap或align-items: start + min-height更稳妥
真正容易被忽略的裁剪源头
很多人调了半天 overflow: hidden 和 padding，阴影还是断，问题往往不在这一层——而是祖先元素早就在上游悄悄裁了。
- 检查所有父级、祖父级元素的
overflow、clip-path、transform（尤其是translateZ(0)或will-change: transform），它们都可能隐式创建新层叠上下文，扩大裁剪边界 - 图片未加载完成时，父容器初始高度为 0，JS 插入后未重绘；加
min-height: 1px可防塌陷 - 用了
max-height锁死高度？即使子元素撑开了，父容器也不会响应，阴影照样没地方落 - DevTools 里看 computed height 是不是真变了；如果还是 0，说明闭合浮动根本没生效，别急着调阴影
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
