绝对定位元素不认浮动父容器边界，因浮动不构成包含块，其定位参照是最近已定位祖先；须给浮动容器加position: relative以激活包含块角色，避免用absolute以防塌陷。
绝对定位元素为啥不认浮动父容器的边界
因为浮动元素不构成新的包含块，position: absolute 的定位参照永远是最近的「已定位祖先元素」（即 position 为 relative、absolute、fixed 或 sticky），而浮动（float）本身不属于定位属性。哪怕父容器同时写了 float: left 和 position: static（默认值），它依然不是包含块。
怎么让绝对定位元素以浮动容器为参考系
必须显式给浮动容器加定位属性，让它升级为包含块：
- 最稳妥的是加
position: relative—— 不改变布局流，只激活包含块角色 - 避免用
position: absolute，否则该容器自身会脱离文档流，可能引发父级高度塌陷等连锁问题 - 如果容器本就需浮动（如传统多栏布局），加
position: relative后仍可保留float，两者不冲突
示例：
.sidebar {
float: left;
width: 200px;
position: relative; /* 关键：激活包含块 */
}
.sidebar .badge {
position: absolute;
top: 8px;
right: 8px; /* 此时 right 是相对于 .sidebar 左右边界，不是视口 */
}
为什么有时候加了 position: relative 还不对劲
常见干扰源有三个：
- 父级存在
transform、filter或will-change—— 这些属性会隐式创建包含块，导致绝对定位元素跳过你加relative的那层，直接找上层满足条件的祖先 - 浮动容器高度塌陷（内部只有浮动子元素）——
position: relative虽然生效，但容器高度为 0，top/bottom计算基准实际是 0，视觉上像“没定位” - 用了
display: inline-block或display: table-cell的容器，又加了float—— 浏览器行为不一致，某些旧版 Chrome 下包含块判定异常
浮动 + 绝对定位的真实使用场景和替代建议
这种组合现在基本只出现在遗留代码或 CSS 重置需求中。现代布局更推荐：
立即学习“前端免费学习笔记（深入）”；
- 用
display: flex或display: grid替代浮动实现多栏，再用position: absolute做局部装饰（比如角标、气泡） - 若必须兼容 IE8–9，优先用
position: relative包裹浮动容器，并确保其有明确高度（如min-height或清除浮动） - 注意：
contain: layout对包含块无影响，别指望它修复这个问题
真正容易被忽略的是 transform 创建新包含块这条隐性规则——它不报错、不警告，但会让定位突然“偏移”，查起来特别费时间。
