浮动元素脱离文档流，position定位元素不感知浮动，需手动预留空间或用BFC隔离；clear仅对普通流元素有效，对absolute/fixed无效。
浮动元素会脱离文档流，position定位无法直接“避开”它
这是最常被误解的一点：给一个 position: absolute 或 position: fixed 的元素设置 top/left，它不会自动绕开旁边浮动的盒子。浏览器根本不会去“计算浮动占据的空间”来调整定位元素的位置——因为浮动元素已脱离普通流，而绝对定位元素只参考其 最近的已定位祖先（position 不为 static），两者在布局计算上是平行关系。
所以不是“同时用就能协同”，而是必须明确谁让位、谁占位、谁清空：
- 浮动元素负责横向排列（如侧边栏 + 主内容）
-
clear用在后续普通流元素上，强制它下移避开浮动区域 -
position用在需要精确坐标控制的元素上（如右上角通知 badge、悬停下拉菜单），但它默认不感知浮动，需手动留白或包裹隔离
clear 只对普通流中的块级元素生效，对 position 元素无效
clear: both 这类声明，只有在元素处于文档流中（即 position: static 或 relative 且未脱离流）时才会触发“下移避让”。一旦设了 position: absolute 或 fixed，该元素就完全脱离流，clear 对它毫无作用。
常见误写：
立即学习“前端免费学习笔记（深入）”；
.badge {
position: absolute;
top: 10px;
right: 10px;
clear: both; /* ← 这行完全没效果 */
}正确做法是：如果希望定位元素不和浮动内容重叠，要么
- 给它的父容器加
overflow: hidden或display: flow-root来形成 BFC，隔离浮动影响范围 - 手动在定位元素的
right/top值里预留出浮动宽度（比如侧边栏宽 200px，主内容区margin-left: 200px，再把 badge 放在主内容区内定位） - 避免让定位元素和浮动元素共享同一父容器的视觉空间，改用嵌套结构分离层级
float + position: relative 可用于微调，但别指望它“跟随”浮动流
position: relative 不会让元素脱离文档流，所以它可以和 float 共存，常用于对已浮动的元素做偏移修正（比如浮动图片后加个带阴影的图注，想让它稍微右移一点）：
.figure {
float: left;
width: 150px;
}
.figure-caption {
position: relative;
left: 8px; /* 相对于它原本浮动后的位置右移 */
}注意两点：
- 偏移基准是该元素在浮动后所处的“静态位置”，不是父容器左上角
- 这种相对位移仍受浮动影响——如果上面有其他浮动元素撑高了位置，它也会跟着上移；它不会“粘着”浮动块一起动
- 若想让文字环绕浮动图+图注整体，得把图和图注包进同一个浮动容器里，而不是单独给图注加
relative
真正安全的混用方式：用 float 做基础流向，用 position + clear 控制局部锚点
典型场景：左侧导航栏浮动，右侧主内容用 clear 避开，再在主内容内部某个区块（如文章标题旁）加一个绝对定位的标签（如“推荐”徽章）。
结构示例：
<aside class="nav"></aside> <main class="content"> <h1>标题<span class="tag">推荐</span></h1> </main>
CSS 关键部分：
.nav { float: left; width: 200px; }
.content { margin-left: 200px; } /* 清除浮动影响，不用 clear */
.tag {
position: absolute;
top: 0.2em;
right: -1em;
background: #ff6b6b;
}这里的关键是：clear 没直接和 position 元素共用，而是通过 margin-left（或 overflow: hidden）让主内容区主动避开浮动，再把定位元素限制在已“腾出空间”的区域内。这才是可控的协作逻辑。
浮动本身越来越边缘化，现代布局应优先考虑 flex 或 grid；但如果维护老项目，记住：定位不避浮，清浮不管定，二者共存必须靠“空间预分配”或“容器隔离”。
