浮动元素脱离文档流会导致父容器塌陷和后续元素错位，真正可控的替代方案是用position: absolute或display: inline-block；若必须用Float，则需通过clear或触发BFC（如display: flow-root）来清除影响。
浮动元素导致后续元素错位，怎么让它“不占文档流”又可控
用 float 的本质是让元素脱离普通文档流，但它的副作用太强：父容器塌陷、后续块级元素上浮、文字环绕难以预测。真正想“不影响其他元素定位”，float 从来就不是解法——它天生就是用来影响布局的。
为什么 position: relative 单独用解决不了浮动残留问题
position: relative 只是让元素在原位置偏移，它仍占据文档流空间，且对已发生的 float 没有清除作用。常见错误是给浮动元素加 position: relative 再调 top/left，结果发现父容器还是塌陷、后面的文字依然绕行。
- 浮动元素加
position: relative→ 仅改变自身渲染位置，不解除浮动行为 - 后续元素仍会把浮动元素当“障碍物”处理（文字环绕）或忽略其高度（块级元素上浮）
- 父容器无法自动包裹浮动子元素，除非手动触发 BFC 或加清除
真正有效的替代方案：用 position: absolute 或 display: inline-block
如果目标是“视觉上偏移、但不干扰其他元素布局”，优先考虑这两个方向：
- 用
position: absolute：完全脱离文档流，父容器需设position: relative作为定位上下文 - 用
display: inline-block+ 垂直对齐：保持文档流内位置，但可通过vertical-align精细控制对齐，无环绕、不塌陷 - 若必须保留浮动语义（如旧项目兼容），则必须配合清除：在后续元素上加
clear: both，或在父容器用::after伪元素清除
.container::after { content: ""; display: table; clear: both; }容易被忽略的关键点：BFC 触发和父容器高度坍缩
浮动元素导致父容器高度为 0，不是“样式没写对”，而是标准行为。只要没创建新的 BFC，这个现象必然发生。所以不是“怎么调 position: relative”，而是“怎么让父容器重新获得高度感知”：
立即学习“前端免费学习笔记（深入）”；
-
overflow: hidden、overflow: auto都能触发 BFC，但可能意外裁剪溢出内容 -
display: flow-root是现代推荐写法，专为此设计，无副作用 -
float元素本身不会继承父容器的position: relative，定位上下文必须显式设置在父级
复杂点在于：不同清除方式在 IE、safari 旧版本表现不一致；display: flow-root 在 ios 12.2+ 才稳定支持。实际项目中得看目标环境再选。