清除浮动本身不截断box-shadow，真正裁剪阴影的是overflow: hidden；它裁剪元素绘制边界（含border box外的阴影），而display: flow-root可触发BFC且无裁剪副作用。
清除浮动本身不会截断 box-shadow，真正截断的是 overflow: hidden
很多人以为“用了 clearfix 就导致阴影被切”，其实是误判。标准的 .clearfix::after 伪元素（content:""; display: table; clear: both;）只负责撑开父容器高度，它不设 overflow，也不触发裁剪——阴影是否被截，和它完全无关。真正动手“拿刀裁阴影”的，是开发者顺手加上的 overflow: hidden。这个声明常被当成“清浮动标配”一起写上，结果阴影跟着内容一起被物理砍掉。
常见错误写法：
`.card {
overflow: hidden; /* ← 这行才是元凶 */
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.card::after {
content: "";
display: table;
clear: both;
}`验证方法：临时删掉 overflow: hidden，阴影立刻完整出现——高度没变、clearfix 没动，只是裁剪开关关了。
为什么 overflow: hidden 会裁掉 box-shadow
box-shadow 渲染在元素的 border box 外围，但它仍属于该元素的“绘制边界（painting area）”。而 overflow: hidden 不仅裁内容，也裁这个边界——超出 padding box 的阴影像素，浏览器直接丢弃，不画。
立即学习“前端免费学习笔记（深入）”；
- 即使父容器已用 clearfix 正确撑高，只要
overflow: hidden存在，阴影就仍在裁剪范围内 - 圆角（
border-radius）会让裁剪更明显：阴影边缘被硬切，露出直角断口 - 某些场景下（如 Safari +
transform组合），裁剪还可能延伸到 padding 区域，让加 padding 的方案也失效
display: flow-root 为什么能避开裁剪
display: flow-root 是专为解决浮动塌陷设计的现代方案，它触发 BFC，让父容器重新包含浮动子项，但**不附带任何裁剪行为**。
- 它不改变
overflow默认值（visible），阴影自然落在可绘制区域内 - 兼容性已覆盖主流浏览器：Chrome 64+、Firefox 62+、Safari 15.4+、Edge 79+
- 注意：
display: flow-root和position: absolute不能共存，后者会让前者退化为display: block
正确写法：
`.card {
display: flow-root; /* ← 替代 overflow: hidden + clearfix */
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}`如果必须保留 overflow: hidden，怎么保阴影
不是所有项目都能立刻替换掉 overflow: hidden，比如第三方组件封装或遗留代码。这时得给阴影“留活路”：
- 加
padding：值至少取abs(offset-y) + blur-radius，例如box-shadow: 0 4px 12px ...至少要padding: 16px - 同步设
box-sizing: border-box，避免 padding 挤占内容宽度 - 慎用伪元素方案：用
::before绘制阴影时，必须设z-index: -1且inset要大于阴影外延，否则仍可能被祖先的overflow截断 - 真机调试时重点检查 computed 样式里的
padding-box尺寸是否真实生效——有些框架会动态重写 inline style，覆盖你写的 padding
最常被忽略的一点：DOM 链路上任意一层祖先，只要同时满足 position ≠ static 且 overflow: hidden/auto/scroll，就会成为裁剪源头。别只盯着直接父容器。
