定位元素脱离文档流而浮动元素仍在文档流中，这是冲突根源；当同时设置float和position: absolute时，float被强制设为none且不可恢复。
定位元素会脱离文档流，浮动元素不会
这是冲突的根源。position: absolute 或 position: fixed 会让元素完全脱离文档流，不再占据空间；而 float: left 或 float: right 虽然也会影响布局，但浮动元素仍属于文档流（只是视觉上偏移，并参与父容器的高度计算——除非父容器未清除浮动）。
当一个元素同时设置 float 和 position: absolute 时，float 会被忽略——CSS 规范明确要求：只要 position 值不是 static，且 float 不是 none，则 float 计算值强制为 none。
- 浏览器实际渲染时，
float属性直接失效，不产生任何浮动效果 - 即使你在 DevTools 中看到
float: left被声明，Computed 栏里显示的仍是float: none - 这种“覆盖”是隐式、不可逆的，无法通过优先级或 !important 恢复浮动行为
需要重叠+文字环绕？别混用 float 和 absolute
典型误用场景：想让一张图左浮动、文字绕排，又希望它相对某个容器右上角定位。这时强行加 position: absolute 会导致文字塌陷到顶部，失去环绕效果。
正确解法取决于目标：
立即学习“前端免费学习笔记（深入）”；
- 若需图文环绕 → 只用
float，配合margin控制间距，禁用所有position非static值 - 若需精确定位（如 badge 叠在头像右上角）→ 改用
position: relative在父容器上，子元素用position: absolute，彻底放弃float - 若必须动态切换（比如响应式下小屏用定位、大屏用浮动）→ 用媒体查询分别控制，避免同一元素同时声明两者
父容器高度塌陷常被误认为是“定位与浮动冲突”
现象：给子元素设了 float: left，父容器高度变成 0；接着你给该子元素加 position: relative 并尝试用 top 微调，发现父容器还是没高度——于是怀疑是定位干扰了浮动。
其实不是冲突，而是误解：position: relative 不影响文档流，也不会修复塌陷；真正导致塌陷的是浮动本身未被清除。
- 修复方式只能是清除浮动：
overflow: hidden、display: flow-root（推荐）、或伪元素::after { content: ""; display: table; clear: both; } -
position: relative+top只改变渲染位置，不改变元素在文档流中的原始占位，所以不影响父容器高度计算 - 如果此时再给该元素加
position: absolute，它立刻脱离流，父容器更不可能撑开高度
现代布局中应主动规避 float + position 组合
CSS Grid 和 Flexbox 已覆盖绝大多数传统浮动+定位的混合用途。强行保留两者共存，往往暴露的是布局思路未更新。
- 侧边栏 + 主内容？用
display: flex或grid-template-columns，无需浮动 - 图标+文字对齐？用
align-items: center或vertical-align，不用position: absolute+float拼凑 - 悬停提示框（tooltip）？父容器
position: relative，提示层position: absolute，全程无浮动参与
唯一还可能遇到两者的场景是维护老项目，此时第一反应不应该是“怎么让它们共存”，而是“能否用 display: flow-root 替代 overflow: hidden 清除浮动”，或“这个 absolute 元素能否移到父容器内独立定位”——把问题从“调和冲突”转向“解耦职责”。
