tooltip 定位失败的根本原因是浮动元素未创建定位上下文、父容器高度塌陷及层叠上下文缺失；需为浮动容器设 position: relative、触发 bfc 防塌陷、明确 z-index 并确保 dom 嵌套正确。
浮动元素没设 position: relative，Tooltip 就找不到定位锚点
Tooltip 用 position: absolute 时，浏览器会向上找最近的「已定位祖先」——即 position 值为 relative、absolute、fixed 或 sticky 的父级。但浮动元素（如 float: left）默认仍是 position: static，无法充当定位上下文。结果 Tooltip 只能回退到 或视口定位，一滚动就飘走。
解决方法很简单：给浮动容器显式加 position: relative，哪怕它只是个视觉上的“浮动块”。
- 不要只靠
float控制布局，同时补上position: relative - 确保 Tooltip 元素是这个容器的直接子节点（DOM 结构上嵌套，不是 append 到
document.body） - 避免在同一个元素上同时写
float: left和position: absolute—— 后者会让float失效，且定位基准彻底丢失
父容器高度塌陷，导致 Tooltip 的 top 计算起点错位
浮动子元素会让父容器高度塌陷（height = 0），而 Tooltip 的 top: 100% 是相对于父容器内容高度计算的。如果父容器实际高度为 0，top: 100% 就等于 0px，Tooltip 直接贴到顶部，而不是紧贴宿主元素下方。
这不是 Tooltip 写错了，是父容器没“兜住”浮动子元素。
- 给浮动父容器加
overflow: hidden或overflow: auto（触发 BFC，最简可靠） - 或用伪元素清除法：
.clearfix::after { content: ""; display: table; clear: both; }，再给容器加class="clearfix" - 不要只在 Tooltip 后面加
clear: both—— 它只影响自身位置，不修复父容器塌陷
浮动 + 绝对定位混合时 z-index 层叠失效
浮动元素和绝对定位元素共存时，若未显式设置 z-index，浏览器会按文档流顺序渲染：浮动元素先画，Tooltip 后画，但可能被后续的浮动兄弟元素盖住（尤其列表项循环渲染时）。
这是因为浮动元素虽脱离普通流，但仍参与层叠上下文构建；而 z-index 只在「已定位元素」间生效，且需同级比较。
- 给 Tooltip 容器设
z-index: 1000（足够高，避开常见 UI 组件） - 确保它的父容器（即那个
position: relative的浮动块）也有明确z-index（哪怕只是1），否则 Tooltip 的层级可能被截断 - 避免把 Tooltip 挂在
body下——它会脱离浮动容器的层叠上下文，z-index失效
响应式下浮动宽度变化，导致 Tooltip 水平偏移
浮动元素宽度随屏幕缩放变化（比如 width: 50%），但 Tooltip 的 left 如果写死成 20px 或用 calc(100% + 10px)，就可能在小屏下错位：前者固定像素太远，后者百分比值基于浮动块当前宽度，而该宽度又受浮动影响不稳定。
真正要对齐的是触发点（比如按钮右边缘），不是浮动块的右边界。
- 用
left: calc(100% - 4px)这类相对计算时，确认100%是相对于哪个元素的宽度（应是触发按钮，不是浮动父容器） - 更稳妥的做法：让 Tooltip 的 DOM 插入到触发按钮内部（而非浮动块顶层），并设按钮为
position: relative - 避免在浮动布局中依赖
transform: translate()做微调——Safari 对百分比 translate 解析不一致，容易错位
浮动本身不坏，但 Tooltip 对定位上下文极其敏感。问题往往不出在 Tooltip 样式本身，而在它“站哪儿”这件事没交代清楚——父容器是否可定位、是否撑开、是否参与层叠，三者缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
