17370845950

浮动导致父容器高度塌陷使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 正常显示的稳定路径。真正容易被忽略的是：清浮动只是第一步，还得确认没有上级容器在默默裁剪。