position: relative 不能修复浮动导致的父容器高度塌陷，因其既不触发 bfc 也不清除浮动；真正有效的方案是 display: flow-root 或完整 clearfix。
相对定位（position: relative）本身不能修复浮动导致的父容器高度塌陷。 它既不触发 BFC，也不清除浮动，对父容器高度计算毫无影响——这是常见误解的根源。
为什么 position: relative 对塌陷无效
浮动元素脱离普通文档流，父容器无法感知其尺寸；而 position: relative 只是让元素“在原位置偏移”，它仍在文档流中、不改变父容器的高度计算逻辑。给父元素加 position: relative，或给浮动子元素加，都不会让父容器重新撑开。
- 给父元素设
position: relative：只是开启了一个新的层叠上下文，不影响 BFC 或高度计算 - 给浮动子元素设
position: relative：子元素依然 float，依然脱离文档流，父容器照样“看不见”它 - 常见误操作：
.parent { position: relative; clear: both; }——clear: both在非浮动元素上无意义，完全不生效
真正能用的方案：优先选 display: flow-root
这是现代 CSS 专为解决浮动塌陷设计的属性，语义明确、副作用为零：
- 一行代码即可：
.parent { display: flow-root; } - 兼容性已足够好：Chrome 64+ / Firefox 58+ / Safari 15.4+ / iOS 15.4+ 均支持
- 不裁剪阴影、不干扰
position: fixed、不破坏 z-index 层叠，移动端也稳 - 兜底写法可加
@supports判断：.parent { display: flow-root; } @supports not (display: flow-root) { .parent { overflow: hidden; } }
如果必须兼容老浏览器，clearfix::after 要写全四要素
漏掉任意一项都会失效，尤其在安卓 WebView 或旧版 QQ 浏览器里：
-
content: ""—— 缺了就无伪元素生成 -
display: table—— 比block更稳妥，避免 IE margin 双倍等问题 -
clear: both—— 真正执行清除动作 -
height: 0—— 防止部分老内核误算高度
标准写法：
.clearfix::after {
content: "";
display: table;
clear: both;
height: 0;
}
别在浮动布局上硬套 position: relative 找补——它不是清浮动的工具。真正要撑高父容器，要么换现代方案（flow-root），要么用经过验证的老办法（完整 clearfix），或者干脆转向 flex/grid，让 float 彻底退休。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
