CSS解决浮动导致的外部容器阴影失效_闭合浮动以计算正确高度

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 仍可能不可见——闭合浮动只是解决高度问题的第一步，后续得看具体渲染上下文。