overflow: hidden 会裁掉卡片阴影，因其强制触发bfc并裁剪超出padding box的内容，而box-shadow绘制在border box外；应改用display: flow-root清浮动，它创建bfc却不裁剪阴影。
为什么 overflow: hidden 会让卡片阴影被裁掉
浮动卡片的 box-shadow 被截断，90% 是因为父容器用了 overflow: hidden 清浮动。它确实能撑开高度，但副作用是直接剪掉所有溢出内容——包括阴影。这不是 bug，是规范行为。
常见误判是以为“阴影没加对”，实际是父级把刚渲染出来的阴影像素一刀切了。
- 检查父容器是否含
overflow: hidden或overflow: clip，有就删或改visible - 若必须保留裁剪逻辑（如限制圆角溢出），改用
display: flow-root替代，它创建 BFC 但不裁剪 - 给浮动卡片本身加
min-height: 1px，防塌陷导致阴影垂直定位偏移
display: flow-root 是现代清浮动的首选
display: flow-root 是目前最干净的清浮动方案：它强制父容器创建新的 BFC，能包含浮动子项，又不干扰 box-shadow、position: absolute 子元素或下拉菜单的显示范围。
兼容性已不是问题：Chrome 64+、Firefox 58+、Safari 15.4+、Edge 79+ 全支持；仅需留意 IE 完全不支持（但 IE 已退出主流）。
- 写法就是给卡片容器加
display: flow-root，无需伪元素、无额外 DOM - 比
overflow: hidden更安全，尤其当卡片带box-shadow、transform或弹出层时 - 若项目需兼容旧版 Safari（.clearfix::after 方案
.clearfix::after 必须三要素齐全才生效
伪元素清除法仍是兼容性兜底主力，但很多人复制代码后失效，问题常出在三个关键点上缺一不可。
标准写法：
.clearfix::after {
content: "";
display: table;
clear: both;
}
-
content: ""缺失 → 伪元素不生成，整个规则无效 -
display: table写成block→ 在 IE6–7 下可能引发 margin 双倍问题，且部分老浏览器无法触发清除 -
clear: both放错位置（比如写在::before）→ 不作用于浮动流末尾，清除失败
浮动卡片 hover 悬浮效果别碰 margin
想让卡片 hover 时“浮起来”，很多人习惯加 margin-top: -2px 配合 box-shadow，结果阴影和卡片错位——因为 margin 只推挤兄弟元素，不改变自身在 z 轴的位置，阴影依然按原始坐标渲染。
- 正确做法：只调
box-shadow的 vertical offset（如从0 2px→0 -2px）和 blur radius（如4px→12px） - 若需微调视觉高度，用
transform: translateY(-2px)，它不触发布局重排，阴影偏移同步跟随 - 移动端慎用 hover：iOS Safari 仅长按短暂触发，Android Chrome 多数忽略，浮动卡片本身也缺乏触控反馈
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
