应优先弃用 float 改用 flex 或 grid 布局；若必须共存，需确保 absolute 元素父容器设 position: relative 以明确包含块，对浮动容器触发 BFC（如 display: flow-root），并避免 transform 等触发 fixed 定位退化。
浮动元素和 position: absolute 元素重叠怎么办
浮动元素（float）会脱离文档流但影响其他内容的排版，而 position: absolute 元素完全脱离文档流且相对于最近的已定位祖先定位。两者共存时，absolute 元素常“压”在浮动内容上，或被浮动元素挤偏位置。
根本原因不是“冲突”，而是渲染顺序和包含块计算逻辑不同：浮动元素仍参与行内格式化上下文，而 absolute 元素的包含块由最近的 position 为 relative、absolute 或 fixed 的祖先决定。若没设，就回退到初始包含块（通常是视口），导致定位失控。
- 给
absolute元素的父容器加position: relative，确保它有明确的包含块 - 避免把
absolute元素直接放在浮动兄弟元素的同级容器里；优先用嵌套结构隔离布局责任 - 如果必须并列，可对浮动元素的父容器设置
overflow: hidden或display: flow-root，防止其影响外部定位元素的定位上下文
float 和 position: fixed 导致页面滚动错位
position: fixed 元素固定在视口，但若其祖先有 transform、perspective、filter 或 will-change，浏览器会创建新的包含块，使 fixed 行为退化为相对该祖先定位——此时再和浮动元素混用，极易出现滚动时“粘不住”或偏移的现象。
- 检查
fixed元素所有上级节点，移除不必要的transform: translateZ(0)或filter: blur(1px) - 不要把
float容器作为fixed元素的父级或祖父级；fixed应尽可能挂载在直接子层 - 若需响应式侧边栏 + 固定操作按钮，放弃
float，改用display: flex或grid布局，从根源规避问题
清除浮动后 position: relative 元素高度塌陷
常见于用 float 实现两栏布局，又想让外层容器有正确高度来包裹一个 position: relative 子元素。若只靠 clear: both 清浮动，而没触发 BFC，容器仍可能高度塌陷，导致 relative 子元素的 top/left 相对于错误的“零点”计算。
立即学习“前端免费学习笔记（深入）”；
- 对浮动容器使用
display: flow-root（现代推荐）或overflow: hidden（兼容性更好）来建立 BFC - 避免在同一个容器上同时设
float和position: relative——relative不改变文档流，但会干扰浮动清除逻辑 - 若需定位控制，优先将
position: relative设在浮动容器本身，再把需要偏移的子元素设为absolute，而非反向操作
为什么改 position 值不一定解决问题
单纯把 position: static 改成 relative 或 absolute，不解决底层布局模型矛盾。比如在 Flex 容器里对子项设 float，CSS 规范明确忽略 float；在 Grid 容器中同理。此时调 position 只会让行为更不可预测。
- 先确认父容器的 display 类型：
block、flex、grid对float和position的处理完全不同 -
float已是遗留技术，新项目中遇到定位冲突，第一反应不应该是“怎么调position”，而是“能不能不用float” - 真正容易被忽略的是层叠上下文（stacking context）：
z-index只在建立了层叠上下文的元素上生效，而position: relative/absolute/fixed+z-index ≠ auto才会创建——否则调了也白调
