浏览器忽略float并使其计算值恒为none，应删除float仅保留absolute及偏移值；父容器需加position: relative提供定位上下文，或改用flex/grid布局。
同一元素上写了 float 又写了 position: absolute 怎么办
浏览器直接忽略 float，计算值恒为 none。这不是“两者共存”，而是 absolute 单方面覆盖了 float 的行为。
立刻删掉 float 声明，只保留 position: absolute 和 top/right 等偏移值。如果原本靠 float: left 实现左对齐，改用 display: flex 或 text-align + inline-block 更可靠。
代码里留着失效的 float 不仅没用，还会误导后续维护者，以为它还在参与布局。
父容器用了 float，子元素 position: absolute 却定位错乱
问题不在子元素，而在父容器没提供有效的定位上下文。float 本身不触发包含块（containing block），absolute 会一路向上找，直到 <html> 或最近的 position: relative 元素。
立即学习“前端免费学习笔记（深入）”；
给父容器加上 position: relative（哪怕它同时有 float: left）——这是最轻量、最直接的修复方式。
更稳妥的做法是：去掉父容器的 float，改用 display: flex 或 grid 控制整体布局。现代布局容器天然兼容 absolute 子元素，且上下文稳定。
注意检查父容器是否设置了 overflow: hidden——这会裁剪溢出的 absolute 子元素，尤其影响下拉菜单、提示框等场景。
浮动内容被 absolute 元素遮挡或重叠
absolute 元素完全脱离文档流，它不“知道”浮动元素在哪，也不为其让位；而浮动元素的位置又随内容宽度动态变化，两者基准根本不同。
不要指望靠 z-index 简单解决——先确认遮挡是否源于定位上下文错误或父容器裁剪。
需要右上角固定按钮？直接给按钮设 position: absolute; top: 10px; right: 10px，父容器加 position: relative 即可。
若必须复用老代码中的浮动结构，把要精确定位的元素从浮动流中抽出来，单独作为一层放在父容器内，避免和浮动子元素共享同一布局层级。
浮动父容器高度塌陷，导致 absolute 子元素视觉错位
浮动子元素会让父容器高度塌陷，而 absolute 子元素又不参与高度计算，结果就是父容器“看不见”自己内部的内容，布局基准失准。
用 overflow: hidden 或伪元素 ::after 清除浮动，确保父容器有正确高度。
但注意：overflow: hidden 不能加在设置了 position: relative 的那个父容器上——否则会意外裁切 absolute 子元素。
真正麻烦的不是 absolute 本身，而是它所依赖的定位上下文是否干净、稳定。一个混用 float、overflow、position 的父容器，往往比看起来更脆弱。
