浮动塌陷导致父容器高度为0，使后续定位元素参照错误祖先：应给浮动元素的直接父容器触发BFC（如overflow:hidden）或伪元素清除浮动，而非在定位元素上加clear。
浮动元素撑不开父容器，定位元素被“吸”上去怎么办
这是典型的浮动塌陷问题：当子元素用了 float，父容器高度坍缩为 0，导致后续用 position: relative/absolute 定位的元素，实际参考的是上一个有高度的祖先容器，视觉上像被“吸”到顶部。这不是 clear 或 position 本身冲突，而是文档流被破坏后的连锁反应。
-
clear只能控制「自身」不与浮动元素同侧，不能修复父容器塌陷 -
position: absolute的元素完全脱离文档流，它根本看不到浮动子元素的存在，更不会“被影响”——真正出问题的是它前面或后面的、仍处于文档流中的兄弟元素 - 常见误操作：在定位元素上加
clear: both，毫无作用，因为clear对position: absolute无效
正确做法：先清除浮动（修复父容器），再谈定位
核心是恢复父容器的正常高度，让后续元素有可靠的文档流基准。不要指望 clear 和 position 直接配合解决问题。
- 给浮动元素的**直接父容器**触发 BFC（推荐）：
.parent { overflow: hidden; /* 或 overflow: auto, display: flow-root */ } - 用伪元素清除（兼容老浏览器）：
.parent::after { content: ""; display: table; clear: both; } - 避免用
clear: both加在定位元素上——它只对文档流中块级元素生效，且必须放在浮动元素之后、同一层文档流里才起作用
如果非要混用 float + position，注意层级和参照物
当浮动元素和定位元素共存于同一父容器时，它们的渲染顺序和堆叠上下文容易混乱，尤其涉及 z-index 时。
-
position: absolute元素默认以「最近的有定位（非 static）的祖先」为包含块，不是浮动元素的父容器，除非该父容器也设置了position: relative - 浮动元素会参与行框布局，可能把 inline-level 的定位元素（如
position: absolute+top: 0）的初始位置“挤偏”，因为它的包含块计算受浮动影响 - 安全做法：浮动区域和定位区域尽量分容器，比如浮动列表用
.list，右侧定位卡片用独立的.card，两者并列于同一父容器下，各自管理高度
现代替代方案：别用 float 布局了
float 本就不是为页面布局设计的，CSS Grid 和 Flexbox 才是解法。强行用 clear 配合 position 是在补旧债。
立即学习“前端免费学习笔记（深入）”；
- 横向排列用
display: flex，不再需要float和clear - 复杂二维布局用
display: grid，定位区域可直接用grid-area或place-self - 若必须兼容 IE8–9，那
display: inline-block+vertical-align比float更可控，且不会塌陷
浮动塌陷不是样式“打架”，是文档流断裂。修复的关键永远在浮动元素的父容器上，而不是在后续定位元素身上加各种补丁。
