box-shadow 在浮动子元素下不显示是因为父容器高度塌陷为0，阴影无处渲染；用 overflow: hidden 触发BFC可闭合浮动、恢复高度，是兼容性最好方案。
为什么 box-shadow 在浮动子元素下不显示？
因为浮动元素脱离文档流，父容器高度塌陷为 0，box-shadow 只作用于有实际尺寸的盒模型——没高度，就没阴影。这不是阴影“失效”，而是容器根本没渲染出可投影的区域。
用 overflow: hidden 闭合浮动最简方案
这是兼容性最好、成本最低的解法，原理是触发 BFC（块级格式化上下文），让容器包含浮动子元素并重新计算高度。
- 适用所有现代浏览器及 IE8+
- 只需在父容器加
overflow: hidden或overflow: auto，无需额外 HTML 元素 - 注意：如果父容器本身需要横向滚动或内容溢出可见，
hidden会裁剪内容，此时改用auto - 示例：
.container { overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
为什么不用 clear: both 的伪元素方案？
虽然 ::after 清除浮动（俗称“clearfix”）也能撑开高度，但它对阴影生效的前提是：伪元素必须参与高度计算，且不能被 display: none 或 visibility: hidden 干扰。
- 常见错误写法：
content: ""但漏掉display: table或display: block，伪元素不占空间，高度仍为 0 - 推荐安全写法：
.container::after { content: ""; display: table; clear: both; } - 若父容器设了
height或max-height，伪元素可能被截断，阴影依然不可见
display: flow-root 是未来首选但需留意兼容性
这是 CSS 新增的专门用于创建 BFC 的值，语义清晰、无副作用，比 overflow 更精准。
- Chrome 64+、Firefox 64+、Safari 15.4+ 支持；Edge 79+ 支持；IE 完全不支持
- 不会像
overflow: hidden那样意外隐藏溢出内容，也不会像float那样影响布局流 - 使用时直接替换旧属性：
display: flow-root即可，无需配合其他声明 - 如需兼容老版本 Safari 或 IE，必须回退到
overflow: hidden方案
真正容易被忽略的是：即使闭合了浮动，如果父容器设置了 min-height 但子元素高度未达阈值，或者用了 transform 触发层叠上下文却遮挡了阴影，box-shadow 仍可能不可见——闭合浮动只是解决高度问题的第一步，后续得看具体渲染上下文。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
