浮动容器不是定位上下文，无法作为absolute子元素的包含块；必须显式设置position: relative等才能创建包含块，且需注意transform等属性会隐式创建新包含块。
浮动容器本身不是“定位上下文”，所以它无法成为 position: absolute 子元素的包含块——这不是 bug，是 CSS 规范明确的行为。
浮动容器默认不创建包含块
浏览器查找 position: absolute 元素的包含块时，只认 position 值为 relative、absolute、fixed 或 sticky 的祖先。浮动（float: left）不在此列，哪怕它视觉上“撑开”了父容器高度，也完全不影响包含块判定。
- 常见错误现象：
top: 0; left: 0的子元素跑到了整个页面左上角，而不是浮动容器左上角 - 即使给浮动容器加了
min-height或用::after { clear: both }清除浮动，只要没设position: relative，包含块就还是往上找 - 检查方法：在 Chrome DevTools 的「Layout」面板里看该绝对定位元素的「Containing Block」指向谁——如果不是你预期的容器，说明它没被识别为定位上下文
为什么 overflow: hidden 或 display: flow-root 也不够
这两个属性能触发 BFC，解决浮动塌陷问题，让容器有正确高度；但它们**不改变定位上下文的判定规则**。一个 display: flow-root 的容器，若没设 position: relative，依然不能作为 absolute 子元素的包含块。
-
overflow: hidden可能意外裁剪absolute子元素（一旦你后续补上position: relative，它立刻生效） -
display: flow-root更干净，不会影响溢出行为，但同样不提供定位锚点 - 真正需要的是：既要有可测量的高度（BFC），又要有定位上下文（
position: relative）——二者缺一不可
transform 等属性会悄悄劫持包含块
如果浮动容器的某个祖先（哪怕隔了好几层）设置了 transform、filter 或 will-change，它会隐式创建新包含块，导致 absolute 子元素跳过你设了 position: relative 的那层，直接以那个带 transform 的祖先为参考。
- 这个过程不报错、无提示，只表现为定位突然偏移几十像素
- 特别容易出现在轮播图、模态框、动画组件等封装好的 UI 模块里
- 调试关键：在 DevTools 中逐级检查「Containing Block」，不要只盯着直接父级
- 临时绕过方案：给浮动容器自身加
transform: translateZ(0)强制它成为包含块（但会创建新层叠上下文，影响z-index）
最常被忽略的一点是：清除浮动和设置定位上下文是两件事，必须分开确认。光看父容器高度恢复了，不代表 absolute 子元素就找到了正确的定位起点——它的“零点”可能还在 body 上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
