浮动元素阴影被裁掉是因为父容器常设overflow:hidden清浮动而剪裁阴影，根本解法是移除该属性或改用display:flow-root创建bfc；同时需设min-height:1px防塌陷，并避免用margin模拟悬浮，应专注box-shadow参数调整。
浮动元素的悬浮阴影为什么总被裁掉
因为 float 本身不创建新的层叠上下文，但它的父容器常带 overflow: hidden 清浮动——这会直接把 box-shadow 剪掉。不是阴影没生成，是刚冒头就被父级“砍”了。
更隐蔽的是：浮动元素若没设置明确高度或 min-height，内容撑开后可能触发外边距合并（margin collapse），导致 box-shadow 的垂直偏移错位，hover 时阴影突然跳动。
- 先检查父容器是否含
overflow: hidden或overflow: clip，有就删或改visible - 给浮动元素加
min-height: 1px（最小安全高度），防塌陷干扰阴影定位 - 避免在浮动元素上直接写
margin-bottom来“留阴影空间”——它不控制阴影渲染区域，纯属误导
box-shadow 和 margin 能不能一起调来模拟抬升感
不能靠 margin 模拟浮起，它只推挤兄弟元素，不改变自身在 z 轴的位置，阴影依然贴地。真正要的是视觉“离屏感”，必须靠 box-shadow 的参数协同变化。
常见误操作是 hover 时加 margin-top: -4px 再配 box-shadow: 0 4px ...，结果卡片上移、阴影却还往下打，看起来像悬空断裂。
- 浮动元素悬浮，只调
box-shadow的vertical-offset（推荐从2px→-2px）和blur-radius（8px→16px），别碰margin - 如果非要微调位置，用
transform: translateY(-2px)，它不触发布局，且能和阴影偏移保持同步 -
margin只该用于浮动布局中控制元素间距，和悬浮效果无关——混用等于自己造 bug
浮动卡片 hover 阴影发虚或抖动怎么办
高 DPI 屏（如 Mac Retina、Windows 缩放 125%+）下，float 元素的 box-shadow 容易因亚像素渲染失真，尤其当 blur-radius 是小数（如 1.5px）或 vertical-offset 小于 2px 时。
- 所有
box-shadow值必须用整数：0 -2px 12px rgba(0,0,0,0.12)，禁用0.5px、1.2px - 模糊半径至少设
4px，1px或2px在高清屏上几乎不可见 - 若 Safari 下仍发虚，放弃
box-shadow，改用filter: drop-shadow(0 -2px 12px rgba(0,0,0,0.12))——它绕过盒模型限制，渲染更稳（但不支持inset）
为什么 float + hover 阴影在手机上基本失效
移动端浏览器对 :hover 的支持极其有限：iOS Safari 只在长按后短暂触发，Android Chrome 多数情况直接忽略。而 float 元素本身在触屏上交互反馈极弱，没有点击态、没有压感，阴影再漂亮也白搭。
这不是 CSS 写得不对，是技术路径错了——float 是为图文环绕设计的，不是为交互组件准备的。
- 功能型卡片/按钮，立刻停用
float，换display: inline-block或display: flex容器 - 必须保留浮动布局？至少补
button:hover, button:active双状态，让触屏用户按下去时有反馈 - 别指望
will-change: transform救浮动——它对已废弃的布局模式优化有限，不如重构布局
浮动元素加悬浮阴影，本质是在过时机制上打补丁。真正省事又健壮的做法，是把 float 从布局逻辑里摘出去，只用它做兼容兜底。阴影效果本身很干净，卡住的从来不是 box-shadow，而是你还在用 float 做现代 UI 的骨架。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
