最直接有效的解决方式是在父级容器上设置 overflow: hidden，这是 CSS 控制视觉裁切的标准做法，能确保子元素 transform 溢出部分被自动裁切，且兼容 flex/grid 布局。
卡片 hover 放大时溢出父容器，根本原因是放大后的尺寸超出了父级的原始布局范围。最直接有效的解决方式，就是在父级容器上设置 overflow: hidden。
父容器加 overflow: hidden 是最稳妥的方案
这是 CSS 中控制视觉裁切的标准做法。只要父元素设置了 overflow: hidden，子元素无论怎么 transform（包括 scale、translate），超出部分都会被自动裁掉，不会影响页面其他区域。
- 不需要改子元素的定位（比如脱离文档流），也不用额外加 z-index
- 对 flex / grid 布局同样适用，不影响整体排版逻辑
- 注意：如果父容器本身有圆角（border-radius），加上 overflow: hidden 后，子元素放大时边缘也会被圆角裁切，这反而是更自然的视觉效果
慎用 transform-origin 和位移来“绕开”溢出
有人尝试通过调整 transform-origin（比如设为 center）或配合 translate 把放大中心往里拉，让卡片“看起来没冲出去”。但这只是视觉错觉，实际占位和事件区域仍可能越界，尤其在响应式或密集布局中容易引发点击错位、滚动异常等问题。
- scale(1.05) + origin center 不等于不溢出，只是溢出方向更分散
- 加 translate(-2px, -2px) 属于“微调补救”，不可靠，不同屏幕缩放下表现不一致
- 不如老老实实加 overflow: hidden，一劳永逸
检查父容器是否意外触发 BFC 或 layout 限制
极少数情况下，即使加了 overflow: hidden 仍溢出，可能是父容器存在隐式 layout（如 float、absolute）、或被某个祖先元素的 transform/opacity 触发了新的层叠上下文，干扰了裁切行为。
立即学习“前端免费学习笔记（深入）”；
- 用浏览器开发者工具检查父元素 computed 样式，确认 overflow 确实生效且值为 hidden
- 查看父元素是否被设置了 transform、filter、opacity 等会创建新层叠上下文的属性
- 若问题依旧，可临时给父容器加一个无副作用的 will-change: transform 来强制创建独立渲染层
基本上就这些。hover 放大本就是纯视觉动效，没必要让它影响布局流 —— overflow: hidden 就是为此而生的，放心用。
