浮动导致父容器高度塌陷使box-shadow被裁剪，根本解法是创建BFC：优先用display: flow-root，次选overflow: hidden或::after清除浮动，并逐级检查上级溢出裁剪。
浮动导致父容器高度塌陷，box-shadow 被裁剪
使用 Float 后，父元素往往高度变为 0，box-shadow 只能显示在那“0 高度”的窄条区域里——实际是阴影被父容器的 overflow: hidden（或默认 visible 下子元素溢出不可见）给截断了。根本原因不是阴影本身有问题，而是父容器没包裹住浮动子元素。
清除浮动的几种可靠方式及适用场景
关键是要让父容器重新“感知”浮动子元素的高度。现代项目优先用 display: flow-root；老项目兼容 IE 时再考虑其他方案。
-
display: flow-root：最简洁，无副作用，支持所有现代浏览器（chrome 64+、firefox 57+、safari 10.1+），直接给父容器加即可 -
overflow: hidden或auto：见效快，但可能意外隐藏内容或触发滚动条，慎用于有下拉菜单、tooltip 等溢出需求的容器 -
::after伪元素清除法：兼容性最好（IE8+），需写额外 css，注意content: ""不可省略，且必须设display: table或block
.clearfix::after { content: ""; display: table; clear: both; }为什么 BFC 是根本解法
display: flow-root 和 overflow: hidden 都会创建新的 BFC（块级格式化上下文），而 BFC 的特性之一就是：**容器会包含内部的浮动元素，计算高度时不再忽略它们**。这正是 box-shadow 能完整显示的前提——父容器有了真实高度，阴影自然落在它边界之外的区域上。
- 避免用
height或min-height硬撑高：无法响应子元素变化，维护困难 - 避免只靠
clear: both放在父容器外：不解决父容器自身高度塌陷问题 - flex/Grid 容器天然形成 BFC：如果布局允许，直接换用
display: flex或grid更彻底
检查是否还有隐藏的溢出裁剪
即使清除了浮动，如果父容器祖先元素设置了 overflow: hidden 或 clip-path，阴影仍可能被截断。逐级向上检查父级的 overflow、transform（某些情况下会创建新层叠上下文并影响渲染）、clip 相关属性。
立即学习“前端免费学习笔记（深入）”；
- 临时加
outline: 1px dashed red到各级父容器，快速定位哪个盒子在“吃掉”阴影 - 浏览器开发者工具中，勾选 “Show layout shifts” 或手动 hover 检查 computed
height和overflow - 阴影本身用
box-shadow: 0 4px 12px rgba(0,0,0,0.15)这类常见值时，若只显示上半部分，基本可断定是上方某层容器高度不足或溢出隐藏
浮动本身已不推荐用于布局，但维护旧代码时，清除浮动 + 确保 BFC 形成，才是让 box-shadow 正常显示的稳定路径。真正容易被忽略的是：清浮动只是第一步，还得确认没有上级容器在默默裁剪。