应使用 position: absolute 替代 float 实现角标定位，因其受卡片边界约束、适配 border-radius、无需计算负 margin 且不依赖 BFC；前提是卡片容器设 position: relative。
不能直接用 float 把角标“推”到右上角——它会脱离文档流、父容器塌陷、错位不可控，除非你同步处理 BFC、负 margin、盒模型和裁切逻辑。
为什么 float 角标在卡片里容易飘出边界
浮动元素一加 float: right 就脱离文档流，卡片容器若没触发 BFC（比如没设 display: flow-root 或 overflow: hidden），就“看不见”角标，高度不包含它，背景/阴影/圆角都失效；更糟的是，margin-top: -20px 这类硬调值对字体、padding、border-radius 高度极其敏感，换一套设计就偏移。
- 徽章尺寸是
24px × 24px，卡片padding: 12px→ 负 margin 至少要margin-top: -36px（12 + 24） +margin-right: -12px - 如果徽章有
border: 1px且box-sizing: content-box，实际宽高多出 2px，负 margin 就得再减 2px —— 手动试配不可维护 -
border-radius: 8px的卡片下，浮动角标大概率溢出圆角，overflow: hidden又会意外裁掉下拉菜单或 tooltip
必须给卡片容器创建 BFC，但别用 overflow: hidden
不加 BFC，卡片根本包不住角标；但用 overflow: hidden 会截断所有溢出内容（阴影、动画、浮层），2026 年已不是安全选项。
- 首选
display: flow-root：它只创建 BFC，不裁剪，现代浏览器全覆盖（Chrome 64+/Firefox 59+/Safari 15.4+） - 兼容 IE11？改用伪元素 clearfix：
.card::before { content: ""; display: table; }+.card::after { content: ""; display: table; clear: both; } - 别在卡片上写
height或min-height来“撑高”——角标位置会随内容动态变化，固定高度反而导致遮挡
float + 负 margin 的三个参数怎么算才稳
不是凭感觉写负数。真正决定角标是否贴边的，是三组值的精确差值：
立即学习“前端免费学习笔记（深入）”；
- 角标自身尺寸（含
border和padding，前提是box-sizing: border-box） - 卡片的
padding值（上下左右必须明确） - 你希望角标离卡片右上角的“视觉留白”，比如
4px，那就不是抵死贴边，而是margin-top: -(padding-top + height - 4px)
示例：卡片 padding: 12px，角标 width: 24px; height: 24px; box-sizing: border-box;，目标留白 4px → margin-top: -32px（12 + 24 − 4），margin-right: -8px（12 − 4）
真正安全的替代方案：用 position: absolute
如果你能控制 HTML 结构（比如角标是卡片内部子元素），position: absolute 配合 position: relative 卡片容器，比 float 稳定十倍：
- 角标完全受卡片边界约束，
top: 4px; right: 4px直观可靠 - 自动适配
border-radius，配合overflow: hidden安全裁切（此时裁切范围可控） - 无需计算负 margin，不依赖 BFC 清除，也不影响卡片内其他浮动或 flex 子项
唯一前提：卡片容器必须设 position: relative，否则 absolute 会相对于 body 定位——这个细节，90% 的人上线前才想起来补。
