CSS 浮动与定位：float、position 与使用场景

浮动（float） 和 定位（position） 都用来改变元素在文档中的排版方式，但机制不同：浮动主要影响周围行盒的环绕；定位则把元素放进定位上下文，用偏移量摆放。

现代布局更多用 Flex / Grid，但浮动与定位仍在图文混排、弹层、吸顶导航等场景里很常见。

一、浮动 `float`

历史上用于多列布局，现已多被 Flex/Grid 替代。如今更常见的是：图片 + 文字环绕。

<article class="media">
  <img class="media__img" src="photo.jpg" alt="" />
  <p>文字会环绕在图片一侧……</p>
</article>

.media__img {
  float: left;
  margin: 0 12px 8px 0;
  max-width: 120px;
}

当容器内子元素浮动后，父级高度可能塌缩，需要「清除浮动」：

.footer {
  clear: both; /* 或 left / right */
}

1）现代推荐：display: flow-root（形成 BFC，包住浮动）

.media {
  display: flow-root;
}

2）传统：伪元素清除

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

3）父级 overflow: hidden / auto（副作用是可能裁剪内容，慎用）

正常文档流，top / right / bottom / left 无效。

仍在原位置占位，视觉可相对自身偏移，常作子元素 absolute 的定位参照。

.card {
  position: relative;
}
.badge {
  position: absolute;
  top: 8px;
  right: 8px;
}

相对最近的、position 不为 static 的祖先定位；若没有，则相对初始包含块（通常是视口或根）。脱离文档流，不占原位置。

相对视口（或浏览器实现中的固定参照）定位，常用于顶栏、返回顶部按钮。同样脱离文档流。

若祖先有 transform、filter、perspective 等，部分浏览器中 fixed 的表现会相对该祖先，调试时需注意。

在滚动到阈值前像 relative，之后像 fixed 粘在容器内。需指定 top / left 等 之一作为粘滞偏移。

.section-title {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
}

注意：祖先若设置 overflow: hidden | auto | scroll，可能使 sticky 失效或表现异常。

只在同一层叠上下文内比较 z-index 大小。position 不为 static、flex 子项、opacity 小于 1 等都可能新建层叠上下文。

简单规则：先保证父级 position: relative，再给子级 z-index，避免与全局导航栏抢层级。