float与position: relative可共存，float先使元素脱离文档流并靠左/右排列，relative再基于浮动终点微调位置；二者常用于图文混排、卡片微调及为absolute子元素提供定位上下文，但需注意偏移基准、z-index生效条件及清除浮动问题。
float + position: relative 能微调浮动后的位置
两者可以共存，float 先让元素脱离正常流并靠左/右排列，position: relative 再基于这个浮动后的位置做偏移——不是相对于原始位置，而是浮动停驻点。这在图文混排、卡片微调、老项目兼容性修复中很实用。
常见错误现象：top: 10px 看起来没动，其实是动了，但你误以为该从原始位置算起；用开发者工具检查盒模型，会发现 offset 是叠加在浮动终点上的。
- 必须显式写
position: relative才能触发top/left等偏移生效 -
float: left后加top: -5px可让元素轻微上浮，避免与上方元素留白过大 - 偏移不会影响其他浮动元素的排列顺序，但可能造成视觉重叠，需留意
z-index - 父容器若未清除浮动，
position: relative不会阻止高度塌陷，反而更难察觉问题
用 relative 为子元素提供 absolute 定位上下文
这是更关键的用途：给一个 float 元素加 position: relative，不是为了调它自己，而是让它变成 position: absolute 子元素的定位参考父级。
使用场景：图片右上角打标签、卡片内悬浮操作按钮、侧边栏内图标精确定位。
- 父级必须有
position: relative（哪怕只是空声明），否则absolute子元素会向上找最近的已定位祖先，可能跑到页面顶部 -
float和position: relative在同一元素上不冲突，但float本身不影响子元素的定位逻辑 - 示例：
.card { float: left; position: relative; }+.tag { position: absolute; top: 4px; right: 4px; } - 注意：如果父容器用了
overflow: hidden清浮动，且子元素absolute超出边界，会被裁剪
为什么不能和 position: absolute/fixed 一起用？
因为 CSS 规范明确：只要 position 值不是 static，float 就被忽略。这不是浏览器 bug，是渲染规则本身决定的。
常见误用：给浮动导航栏加 position: absolute 想固定在顶部——结果 float 失效，元素直接堆到左上角，文字也不再环绕。
-
position: absolute或fixed时，float计算值强制为none -
position: sticky行为类似relative+fixed，同样会让float失效 - 想实现“浮动布局 + 固定效果”，应改用
display: flex或display: grid配合position: sticky
现代替代方案更稳，但 legacy 场景仍需懂它
Flexbox 和 Grid 已能覆盖绝大多数 float + relative 的用途，且无塌陷、无偏移歧义、响应式友好。但维护老项目或对接遗留 CMS 模板时，float + position: relative 组合依然高频出现。
容易被忽略的点：偏移基准是浮动终点，不是原始位置；z-index 必须配合 position: relative 才生效，而浮动元素默认没有堆叠上下文；清除浮动不能靠 position: relative 解决，得用 clear、overflow 或伪元素。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
