display: flow-root可替代overflow: hidden避免裁剪box-shadow，它创建BFC且不干扰溢出渲染；需确保浮动子元素有显式宽度，阴影范围在父容器可视区域内。
overflow: hidden 会裁剪 box-shadow 怎么办
直接给父容器加 overflow: hidden 虽然能触发 BFC、包裹浮动子元素，但也会把超出边界的 box-shadow、position: absolute 下拉菜单、甚至 transform 位移后的部分一并裁掉。这是最常踩的坑——页面看起来“修好了”，但阴影没了、弹窗被切了一半。
用 display: flow-root 替代 overflow
现代浏览器（Chrome 64+、Firefox 59+、Safari 15.4+、Edge 79+）支持 display: flow-root，它和 overflow: hidden 一样能创建 BFC，但完全不裁剪内容。
-
display: flow-root不影响溢出渲染，box-shadow、drop-shadow、transform均正常显示 - 无需额外伪元素或 DOM，一行 CSS 解决，无副作用
- IE 完全不支持，若需兼容 IE11，必须回退到伪元素法
伪元素法 + padding-bottom 补偿阴影
当必须支持老浏览器，又需要保留阴影时，.clearfix::after 是稳妥选择，但得配合预留空间：
- 给父容器加
padding-bottom: 20px（数值略大于阴影的blur + spread总和） - 确保
.clearfix::after的content: ""和display: block都存在，否则清除失效 - 别用
display: table——旧版 Safari 对::after的clear支持不稳定
浮动子元素本身没设 width 导致阴影“悬空”
即使用了 flow-root 或 clearfix，如果浮动元素没显式设置 width（比如图片没设宽高），它会收缩为内容宽度，导致父容器撑不开，阴影区域实际落在父容器外部——看起来像“阴影消失”，其实是位置错了。
- 检查浮动元素是否设置了
width、flex: 1或min-width - 对图片建议写
img { width: 100%; height: auto; }或明确尺寸 - 避免依赖
min-height单独撑开容器——某些 Android WebView 下它会干扰 BFC 高度计算
真正要稳，得同时确认三件事：父容器用了 flow-root 或可靠 clearfix、浮动子元素有可预测宽度、阴影的物理范围在父容器可视区域内。漏掉任意一个，都可能让 shadow “凭空消失”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
