浮动元素脱离文档流导致父容器塌陷和absolute定位失效，应触发BFC修复；relative与float混用行为不可靠，现代布局应优先使用Flex/Grid替代浮动。

浮动元素脱离文档流，会影响后续定位元素的参照系

当一个元素设置了 float: left 或 float: right，它会从正常文档流中“抽离”，后续的块级元素会试图填补它的原始位置，但 position: relative/absolute/fixed 元素的定位基准可能因此错乱。尤其是 position: absolute 的元素，若其父容器未设置 position: relative，它会向上查找最近的已定位祖先——而浮动父容器不被视为“已定位”（position 值为 static 时才是默认值），结果可能直接相对于 body 定位，完全偏离预期。

浮动导致父容器高度塌陷，absolute 子元素的 top/left 计算失效

常见现象：父容器只包含浮动子元素，自身高度变成 0；此时在父容器内写 position: absolute; top: 20px;，实际是相对于 body 向下偏移 20px，而非“在父容器内部距顶部 20px”。这是因为父容器没高度，无法提供定位上下文。

• 修复方式不是给父容器加 height（破坏响应式）

• 

  而是触发 BFC，例如：overflow: hidden、display: flow-root 或伪元素清除浮动（::after { content: ""; display: table; clear: both; }）
• 若同时需要 absolute 定位，优先用 display: flow-root ——它既清浮动又不隐藏溢出，且明确建立新块格式化上下文

relative + float 同时作用于同一元素，行为不可靠

虽然 CSS 规范允许对一个元素同时设置 float 和 position: relative，但效果取决于浏览器渲染顺序：浮动先发生，再应用相对位移。这意味着 top 和 left 是相对于浮动后的位置偏移，而非原始文档流位置。不同浏览器对“浮动后位置”的定义略有差异，容易出现跨浏览器偏移不一致。

• Chrome 和 Firefox 大致一致，但 Safari 在某些缩放或 subpixel 场景下会微调
• z-index 在浮动+relative 元素上仍有效，但层叠上下文可能意外创建（尤其当父元素有 opacity 或 transform）
• 更稳妥的做法：用 margin 替代 top/left 模拟偏移，或改用 Flex/Grid 布局彻底规避浮动

现代布局中，float 和 position 混用本质是过渡方案

浮动本意是文字环绕图片，不是页面布局工具。CSS Grid 和 Flexbox 出现后，所有“用浮动实现两栏/三栏”的场景都应被替代。即使要兼容老项目，也建议将浮动严格限制在文本流内（如 img 右侧文字环绕），而用 position: absolute 处理弹窗、提示框等脱离流的 UI 元素——两者职责分离，自然避免冲突。

立即学习“前端免费学习笔记（深入）”；

.sidebar {
  width: 200px;
  float: left; /* 仅用于旧版兼容 */
}
.main-content {
  margin-left: 200px; /* 不依赖浮动，也不用 absolute */
}
/ 而不是 /
.overlay {
position: absolute;
top: 10px;
left: 10px;
float: left; / ❌ 无意义且危险 /
}

真正难处理的，是那些既有历史浮动结构、又动态插入 absolute 提示层的老系统——这时候得先确认父容器是否建立了可靠的定位上下文，而不是盯着 top 值反复调。