父元素box-shadow显示不全是因为浮动导致高度塌陷；应使用display:flow-root或完整clearfix清除浮动，避免overflow:hidden裁剪阴影。
父元素加了 box-shadow 却只显示半截，大概率是浮动子元素导致父容器高度塌陷——阴影跟着塌陷的父容器一起“缩没了”，不是阴影本身写错了。
为什么父元素阴影会显示不全
浮动元素脱离文档流，父容器无法感知其高度，计算出来的高度可能是 0px 或远小于实际内容。而 box-shadow 是依附于父容器盒模型渲染的，高度不够，阴影自然被裁掉或压扁。
这不是浏览器 bug，是浮动行为的必然结果。你看到的“阴影不全”，本质是“父容器没撑开”。
- 常见现象：父容器设置了
box-shadow和border-radius，但阴影只在顶部/左侧有，下方和右侧消失 - 检查 DevTools 的 computed height，很可能是
0或一个极小值 - 如果父容器同时设了
overflow: hidden，还可能进一步遮挡阴影（尤其圆角+阴影组合）
用 clearfix 修复时必须写全三要素
仅加 .clearfix 类但伪元素样式缺项，照样撑不开高度。标准写法必须同时满足：
立即学习“前端免费学习笔记（深入）”；
-
content: ""—— 缺失则伪元素不生成，清除失效 -
display: table—— 比block更稳妥：避免 IE 下 margin 双倍，且天然触发 BFC 边界 -
clear: both—— 强制伪元素下移到所有浮动子项底部，从而拉高父容器
完整代码示例：
.clearfix::after {
content: "";
display: table;
clear: both;
}
注意：.clearfix 必须加在浮动子元素的**直接父容器**上，加在外层 wrapper 上无效。
现代项目优先用 display: flow-root
它专为解决这类问题设计，语义清晰、无副作用，且能正确包含 box-shadow 渲染所需的空间。
- 兼容性：Chrome 64+/Firefox 59+/Safari 15.4+，IE 完全不支持
- 写法极简：
.parent { display: flow-root; }，无需额外类名或伪元素 - 优势：不会像
overflow: hidden那样意外裁剪阴影、下拉菜单或position: absolute子元素 - 注意：若父容器已有
overflow: hidden，两者共存时以flow-root为主，但旧版 Safari 可能表现不稳定
别踩 overflow: hidden 这个坑
它虽能触发 BFC 撑开高度，但对阴影很不友好：
- 当父容器有
border-radius+overflow: hidden时，阴影会被圆角区域硬裁切，边缘生硬不自然 - 如果子元素用了
position: absolute且超出父容器（比如 tooltip、弹窗），也会被一并裁掉 - DevTools 里能看到 computed
height正常了，但阴影就是“少一块”——这时基本可以锁定是overflow干的
真正要留意的，是那个加了 float: left 却忘了处理父容器的 div。它不报错、不警告，只是 quietly 塌陷着，连带把你的阴影一起吞掉。
