绝对定位与float不能共存，设position: absolute后float声明被浏览器无视并显示为none；浮动父容器需加position: relative以提供定位上下文，否则absolute子元素定位失控。
绝对定位与 float 不能共存于同一元素——position: absolute 一设，float 就被浏览器无视，不是兼容问题，是 CSS 规范强制行为。
同一元素写了 float 和 position: absolute 怎么办
浏览器会直接丢弃 float 声明，Computed 面板里永远显示 float: none。你写的那行 float: left 只会让后续维护者误以为它还在起作用。
- 立刻删掉该元素上所有
float相关声明（float: left、float: right、clear等） - 如果原本靠
float实现左对齐，改用display: flex或text-align + inline-block - 别试图“保留
float再加absolute微调”——这不是叠加，而是覆盖，结果不可控
position: absolute 子元素在浮动父容器里定位跑偏
问题不在子元素，而在父容器没形成有效的定位上下文。浮动本身不触发定位上下文，position: absolute 会一路往上找，直到 body，导致位置失控。
- 给父容器加上
position: relative（哪怕它同时有float: left） - 更稳妥的做法：去掉父容器的
float，改用display: flex或display: grid控制整体布局 - 检查父容器是否设置了
overflow: hidden——这会裁剪溢出的absolute子元素，尤其影响下拉菜单、提示框
图文混排中右上角角标/标签总错位
这不是靠 float 排出来的，而是靠嵌套结构撑起来的：图片用 float: right，角标用 position: absolute，但两者必须共享一个带 position: relative 的父容器。
立即学习“前端免费学习笔记（深入）”；
- 父容器写
float: right; position: relative;（顺序无关） - 角标元素只写
position: absolute; top: 8px; right: 8px; - 不要把角标直接塞进浮动图片的
img标签里——img不是定位上下文，也不支持子元素 - 若父容器高度塌陷（比如只有浮动图片），需额外清除浮动，否则
position: relative无法稳定生效
真正麻烦的不是 float 或 absolute 本身，而是你写的那行 position: relative 到底有没有生效——它必须是最近的那个已定位祖先，且该祖先自身不能因浮动塌陷而失去尺寸基准。
