图文混排不塌陷需用flex布局并清除浮动，头像设flex-shrink:0，文字区域加overflow:hidden；阴影分层靠外阴影+内阴影错开参数；响应式用clamp()和min()控制尺寸；圆角发虚改用clip-path解决。
怎么让图文混排不塌陷、不重叠
图文混排出问题，八成是浮动没清或 display 没对齐。常见现象是头像飘到文字外边、文字被截断、卡片高度塌成一条线。
用 display: flex 是最稳的解法，别碰 float ——它在现代布局里只负责埋雷。
-
flex容器设align-items: center，头像和文字自动垂直居中，不用算margin-top - 头像用
flex-shrink: 0，防止小屏幕下被压缩变形 - 文字区域加
overflow: hidden，避免长名字撑破卡片
.card {
display: flex;
align-items: center;
gap: 12px;
}
.avatar { flex-shrink: 0; }
.info { overflow: hidden; }
CSS阴影怎么分层才不糊成一块
多个 box-shadow 叠一起，不是数值越大越立体，而是得有「远近感」：内阴影模拟凹陷，外阴影模拟浮起，模糊半径和偏移量要错开。
直接写 box-shadow: 0 4px 12px rgba(0,0,0,0.15) 看着干净，但层次感为零；加一层内阴影才能显厚度。
立即学习“前端免费学习笔记（深入）”；
- 外阴影用
0 2px 6px（近） +0 6px 20px（远），模拟不同距离的光散射 - 内阴影加
inset 0 1px 2px rgba(255,255,255,0.5)，提亮上边缘，强化「凸起」错觉 - 别用
blur超过 30px，移动端会糊，iOS Safari 渲染更慢
响应式下图文比例怎么不崩
头像从 80px 缩到 48px，文字字号却还卡在 16px，视觉就失衡。关键不是「等比缩放」，而是按阅读动线重新分配空间。
用 clamp() 控制字号比媒体查询更轻量，但要注意 Safari 14.1+ 才完全支持，老版本得降级。
- 头像尺寸用
min(80px, 12vw)，既保最小可点区域，又防大屏溢出 - 文字行高固定为
1.4，别用em或rem套嵌，否则缩放时行距乱跳 - 小屏下把
flex-direction: column，头像置顶，文字左对齐——人眼扫视顺序比左右并列更自然
阴影和圆角组合为什么边缘发虚
这不是 bug，是抗锯齿策略冲突：border-radius 切圆角，box-shadow 按矩形渲染，两者叠加时 GPU 插值出问题，尤其在 Retina 屏和 Chrome 115+。
最简解法是统一用 clip-path 包裹整个卡片，阴影照常加，圆角由裁切控制。
- 用
clip-path: inset(0 round 12px)替代border-radius，阴影不再「漏边」 - 如果必须兼容 IE，就放弃多层阴影，只留一层
0 2px 8px+border-radius，接受轻微发虚 - 别给
transform: scale(0.99)这类 hack，会触发额外合成层，卡顿比发虚更难调
圆角和阴影的物理感，靠的是参数差值，不是堆叠数量；调的时候盯着真机看，模拟器永远骗你。
