浏览器会直接忽略float声明，因为position为absolute时float失效；应删除float并用flex或grid替代布局，父容器需设position: relative以提供定位上下文，避免overflow: hidden裁剪absolute元素。
同一元素上写了float和position: absolute怎么办
浏览器会直接忽略float声明，因为CSS规范规定：只要position值为absolute、fixed或sticky，float就失效，Computed面板里永远显示为none。
- 立刻删掉所有
float相关声明（float: left、float: right等），只保留position: absolute及top/right等偏移值 - 如果原本靠
float实现左对齐，改用display: flex+justify-content: flex-start，或text-align配合inline-block - 别试图“保留
float再加absolute微调”——这不是叠加，而是覆盖；代码里留着float只会误导后续维护
父容器用了float，子元素absolute定位却跑偏了
问题不在子元素，而在父容器没形成有效的定位上下文。float本身不触发定位上下文，position: absolute会一路往上找，直到<html>，导致位置完全失控。
- 给父容器加上
position: relative（哪怕它同时有float: left） - 更稳妥的做法是：去掉父容器的
float，改用display: flex或display: grid控制整体布局 - 检查父容器是否设置了
overflow: hidden——这会裁剪溢出的absolute子元素，尤其影响下拉菜单、提示框
浮动内容被absolute元素遮挡或错位
absolute元素完全脱离文档流，它不“知道”浮动元素在哪，也不为其让位；而浮动元素的位置又随内容宽度动态变化，两者基准根本不同。
- 不要指望
float和absolute在同一容器内“对齐协作” - 需要右上角固定按钮？直接给按钮设
position: absolute; top: 10px; right: 10px，父容器加position: relative即可 - 若必须复用老代码中的浮动结构，把要精确定位的元素从浮动流中抽出来，单独作为一层放在父容器内（DOM结构上脱离浮动兄弟节点）
用Flex或Grid替代float后，absolute还能用吗
能，而且更稳。现代布局容器本身不干扰position: absolute的行为，只要父级设了position: relative，子元素就能按预期定位。
立即学习“前端免费学习笔记（深入）”；
-
flex容器内的absolute元素仍以父容器为参考，不受justify-content或align-items影响 - 避免在
overflow: hidden的flex容器里放absolute下拉菜单——它会被裁剪 - 真正麻烦的不是
absolute本身，而是它所依赖的定位上下文是否干净、稳定；最常被忽略的点是：absolute元素的定位参考，取决于最近那个position不为static的祖先，而不是视觉上“看起来挨着”的那个浮动块
