第八章：Float 与 Position——布局的过去与现在

在 CSS 的发展史上，float 和 position 曾是构建网页布局的两大支柱。然而，随着 Flexbox 和 Grid 的普及，它们的角色已发生根本性转变。

本章将回顾 float 的兴衰，详解 position 的四种模式，并探讨现代布局中如何正确使用这些“老将”。

---

1. Float 的前世今生：从布局王者到历史遗迹

黄金时代：用 Float 构建多栏布局

在 2000 年代，没有 Flexbox，没有 Grid，float 是实现多栏布局的唯一方式：

.sidebar {
  float: left;
  width: 200px;
}
.main {
  margin-left: 200px;
}

致命缺陷

• 脱离文档流：导致父容器高度塌陷
• 清除浮动（clearfix）：必须手动修复布局
• 响应式困难：无法自动调整列数
• 垂直对齐几乎不可能

为何现在很少用 Float？

✅ 现代替代方案：

• Flexbox：一维布局（如导航栏）
• CSS Grid：二维布局（如页面骨架）

🚫 结论：永远不要再用 float 做布局。它仅适用于文字环绕图片这一原始用途。

---

2. Position 的四种模式

模式	行为	使用场景
static	默认值，正常文档流	无需定位
relative	相对自身原位置偏移，不脱离文档流	微调位置，作为 absolute 的参考
absolute	相对最近的定位祖先偏移，脱离文档流	精确定位（如弹窗、图标）
fixed	相对视口偏移，脱离文档流	固定导航栏、返回顶部按钮

代码示例

.relative {
  position: relative;
  top: 10px;
  left: 10px;
}

.absolute {
  position: absolute;
  top: 0;
  right: 0;
}

.fixed {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

---

3. 如何实现粘性头部和底部？——position: sticky

sticky 是 relative 和 fixed 的结合体：元素在到达特定阈值前相对定位，之后变为固定定位。

粘性头部

.header {
  position: sticky;
  top: 0; /* 距离视口顶部 0px 时固定 */
  background: white;
  z-index: 100;
}

粘性侧边栏

.sidebar {
  position: sticky;
  top: 10px;
  height: 100vh;
}

✅ 优势：无需 JavaScript，性能好，语义清晰。

---

4. 常见问题与解决方案

问题 1：如何避免浮动塌陷？——clearfix 技术

当所有子元素都浮动时，父容器高度为 0，导致布局错乱。

解决方案：

/* 经典 clearfix */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* 现代方案：使用 overflow */
.container {
  overflow: hidden; /* 或 auto */
}

🚫 注意：这已是“考古”知识，现代布局无需此技巧。

问题 2：如何实现绝对定位元素的居中？

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 关键：回退自身宽高的一半 */
}

✅ 为什么不用 margin: -50%？ 因为无法预知元素尺寸。transform 基于自身尺寸，完美居中。

---

5. 现代布局策略总结

技术	适用场景	替代方案
float	文字环绕图片	仅此用途
position	精确定位（弹窗、图标）	结合 Grid/Flexbox 使用
position: sticky	粘性导航、侧边栏	无可替代
Flexbox	一维布局（导航、卡片）	首选
Grid	二维布局（页面骨架）	首选

---

结语：拥抱现代，善用传统

float 作为布局工具已死，但 position 依然强大。
正确的做法是：

• 用 Flexbox 和 Grid 构建页面骨架
• 用 position: sticky 实现粘性效果
• 用 absolute 精确定位小元素
• 用 float 仅做文字环绕

技术在进步，我们应选择最合适的工具，而非沉溺于过去。

下一章，我们将进入“响应式设计进阶：容器查询（Container Queries）与视口单位”。