清除浮动后relative子元素坐标偏移，是因为父容器高度恢复导致其原始文档流位置基准改变；position: relative的偏移始终基于清除前的占位点，而非新撑开后的顶部，故视觉错位。
清除浮动后父容器高度恢复，但relative子元素坐标偏移了
清除浮动本身不会改变 position: relative 元素的定位行为，但会间接影响它的渲染位置——因为清除浮动让父容器重新“感知”到子元素高度，导致父容器高度从 0 变为实际内容高度，而 position: relative 的偏移起点仍是它在标准流中的原始位置（即清除前“塌陷状态下”的占位点）。一旦父容器撑开，这个原始位置可能已上移或下移，造成视觉错位。
常见现象：给浮动子项加 position: relative; top: 10px;，清除浮动后发现它没按预期下移 10px，反而“卡在半空”或贴顶。
- 确保
position: relative是加在**需要偏移的子元素自身**上，而不是加在浮动父容器上（后者无效） - 如果子元素同时有
float和position: relative，它仍会脱标，top/left是相对于其浮动后的位置偏移，不是文档流原位 - 想让偏移基于“清除后的父容器顶部”，就别用
float，改用display: inline-block或flex+position: relative
为什么给父容器加 overflow:hidden 后 relative 子元素位置“跳了一下”
这不是 bug，是 BFC 触发的必然结果：overflow: hidden 让父容器形成 BFC，从而包裹住浮动子元素、撑开自身高度。此时，原本在塌陷父容器中“悬浮”的 position: relative 子元素，突然有了一个有高度的参照容器，它的“原始位置”被重新计算——从视口或上一个非塌陷块级兄弟的底部，回到当前父容器的内容区顶部起算。
性能与兼容性注意：
-
overflow: hidden在 iOS Safari 旧版本（ - 若父容器内真有溢出内容，
overflow: hidden会裁剪，建议优先用display: flow-root（现代浏览器支持良好，无裁剪风险） - IE 11 及更早不支持
flow-root，需回退到伪元素清除法 + 显式设置子元素top值补偿
absolute 子元素在清除浮动后的父容器里定位不准
绝对定位元素依赖最近的已定位祖先（position 不为 static）。清除浮动本身不等于设置 position: relative，所以即使父容器高度恢复了，若没显式加 position: relative，position: absolute 子元素仍会上溯到 body 或其他祖先定位，造成“飘走”。
必须同步做两件事：
- 清除浮动（如用
.clearfix::after） - 给同一父容器加
position: relative—— 这才是建立定位上下文的关键 - 避免在同一个元素上既设
float又设position: relative作为定位上下文（float会干扰relative的定位基准）
示例正确写法：
.parent {
display: flow-root;
position: relative;
}
.child-abs {
position: absolute;
top: 10px;
right: 10px;
}
清除浮动后 relative 子元素文字环绕异常
position: relative 不脱离文档流，但若它的兄弟元素是浮动的，文字仍会绕行——清除浮动只解决父容器塌陷，不解除浮动对文本流的影响。
真正要阻止环绕，得切断浮动与文本的关联：
- 给文字所在容器（如
p或div）加clear: both，强制换行 - 或者把文字容器也设为 BFC（如
overflow: hidden或display: flow-root），让它自成一块，无视外部浮动 - 不要试图用
position: relative的z-index来“盖住”浮动元素——z-index 对普通流内文字无效
最易被忽略的一点：清除浮动和设置定位上下文是两个独立动作，缺一不可；而 display: flow-root 虽能自动清除浮动，但它本身不提供定位上下文——仍需额外加 position: relative 才能让 absolute 子元素乖乖听话。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
