浮动导致父容器高度塌陷，box-shadow因无绘制区域而显示不全；display: flow-root是最优解，它触发bfc且无裁剪副作用，兼容主流浏览器，但不可与position: absolute共存。
浮动导致父容器高度塌陷，box-shadow 只能渲染在“0 高度”的窄条区域里——不是阴影写错了，是它根本没地方画。
为什么浮动会让 box-shadow 显示不全
浮动元素（float: left 或 float: right）脱离文档流，父容器计算高度时直接忽略它们，offsetHeight 常为 0 或仅含行高。而 box-shadow 是绘制在元素 border box 外围的，前提是父容器有真实高度和可绘制区域。没有高度，就没有阴影落点。
- 常见现象：
box-shadow: 0 4px 12px rgba(0,0,0,0.15)只显示顶部 2–3px，下半截被“吃掉” - 临时验证：把父容器
overflow改成visible，阴影立刻完整出现 - 不是所有“看起来正常”的方案都可靠——比如
overflow: hidden虽然撑高了容器，但会硬裁掉溢出内容，包括阴影本身
display: flow-root 是最干净的解法
它专为解决高度塌陷设计，触发 BFC（块级格式化上下文），让父容器重新包含浮动子元素，且不附带裁剪副作用。
- 写法极简：
.parent { display: flow-root; } - 兼容性已足够：Chrome 64+、Firefox 62+、Safari 15.4+、Edge 79+
- 注意：
display: flow-root和position: absolute不能共存，后者会让前者失效 - 它不会影响
transform、border-radius、绝对定位子元素或滚动条行为
别用 overflow: hidden 硬撑，除非你确认不需要溢出
虽然它能快速触发 BFC 并恢复高度，但副作用明显：
- 下拉菜单、Tooltip、弹层等需要溢出的内容会被意外截断
-
box-shadow默认不受overflow: hidden影响——它仍会生成，但若父容器同时设了clip-path或某些transform，可能隐式创建裁剪上下文 - 若必须用，需配合
padding缓冲：至少padding-bottom >= blur-radius + abs(v-offset)（例如0 4px 12px至少要padding: 8px） - 加
outline: 1px dashed red到各级父容器，能快速定位哪个盒子在“吃掉”阴影
真正卡住人的，往往不是清除浮动本身
即使用了 display: flow-root 或 clearfix，以下情况仍会让阴影不可见：
- 祖先元素设置了
overflow: hidden或clip-path，阴影在中途就被截断 - 父容器有
max-height或height锁死，子元素撑不开，高度还是不够 - 图片未加载完成，初始高度为 0，JS 动态插入后未触发重绘（可加
min-height: 1px防塌陷） - 用了
transform或will-change，意外创建新层叠上下文，阴影被限制在该上下文内
调试时优先查 computed height 和 overflow 实际值，而不是只看 Styles 面板里写的什么。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
