这部分内容，是整个 CSS 的灵魂所在，因为所有“视觉、动画、响应式”等后续能力，都建立在“排版布局”这个空间规则之上。
排版，就是“空间秩序”的科学。
起点：HTML 诞生之初，人们遇到的第一个痛点 —— “排版混乱”
起源背景：HTML 只关心“结构”，不关心“版式”
HTML（HyperText Markup Language）最早由 Tim Berners-Lee 于 1989–1991 年设计。
它的使命是：
“定义信息的逻辑结构，让机器读懂，而非定义外观。”
比如：
<h1>标题</h1>
<p>一段文字</p>
<img src="photo.jpg">
👉 这只是结构信息。
浏览器会“自动”用默认规则从上到下展示。
但问题出现了：
- 人们希望做成报纸式的版面；
- 希望文字环绕图片；
- 希望左栏是导航，中间是正文，右栏是推荐。
于是第一个大问题诞生：
“HTML 只能从上往下写，如何让网页像书一样排版？”
第一阶段：表格布局（Table Layout）——“用错的工具解决真问题”
问题：如何让元素并排？
HTML 本无布局概念。
开发者们想到一个“投机取巧”的办法：
表格能分行分列，那我能否用 <table> 把页面分成格子？
于是：
<table>
<tr>
<td>左栏</td>
<td>右栏</td>
</tr>
</table>
💡 网页瞬间变成“两栏排版”！
—— 这在当时是巨大的进步。
表格布局的优点
- 简单直观，所见即所得；
- 各浏览器渲染一致；
- 可实现复杂的行列组合。
致命问题
- 不语义化（内容与结构混乱）；
- 不灵活（改一点布局，要重写表格）；
- 不可维护（嵌套表格极度混乱）；
- 加载慢（浏览器要等整个表格结构才能渲染）。
人们逐渐认识到：表格布局是“语义绑架”。
于是思考转向了：
“能不能让结构和布局分离？”
这便引出了 CSS。
第二阶段：CSS + Float（浮动布局）——“让内容流动起来”
CSS 的诞生动机（1996）
Cascading Style Sheets 出现的目标：
“让 HTML 专注结构，让 CSS 专注表现。”
于是排版第一次被剥离出来，成为一种独立的控制语言。
浮动的灵感：文字环绕图片
早期印刷排版中常见这样的效果：
🖼️图片在左，文字在右环绕。
CSS 中用：
img {
float: left;
margin-right: 10px;
}
浮动（float）原意是：让元素脱离普通文档流，漂浮在左或右，允许文本围绕它。
float 的延展使用
聪明的开发者发现：
“我可以把一堆盒子都 float:left，就能让它们横向排列！”
于是浮动成了网页排版的主力军：
- 两栏、三栏、瀑布流……全靠 float 实现。
- 清除浮动（clearfix）成了经典技巧。
float 的问题
- 脱离文档流，父元素高度塌陷；
- 居中与对齐困难；
- 语义依旧混乱；
- 布局依赖“清除 hack”。
于是新一代思想诞生：
“我们不该靠‘漂浮’实现布局，而该靠‘定位’与‘规则’。”
第三阶段：Position（定位布局）——“让元素脱离文档流，掌握坐标权”
核心思想
“为每个盒子赋予坐标体系，让它能精准放在页面任意位置。”
.box {
position: absolute;
top: 100px;
left: 50px;
}
元素有了自己的“空间坐标”。
优点
- ✅ 彻底摆脱流动约束；
- ✅ 可实现复杂叠层；
- ✅ 精准定位元素。
局限
- ❌ 不适合大规模排版；
- ❌ 缺乏自适应能力；
- ❌ 容易错位、重叠；
- ❌ 难以维护。
于是，人们开始思考：
“我们需要一种既能控制排列，又能响应环境的布局。”
第四阶段：Flexbox（弹性布局）——“让容器驱动排列”
背景
移动互联网时代到来后，屏幕不再固定。
float + position 无法轻松实现“自适应”。
于是 W3C 推出了 Flexible Box Layout（2012）。
它是第一个以“容器思维”定义布局规则的系统。
核心思想
“容器定义规则，子项按规则自动排列。”
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
Flex 不再依赖“浮动”，而是定义一条主轴：
- 元素在主轴上按顺序排列；
- 可自动换行、等比例伸缩；
- 可对齐居中、平均分布。
优点
- 天然响应式；
- 对齐与分配极灵活；
- 语义清晰、易维护；
- 不再依赖 clearfix。
局限
- 一维布局（只能控制一条轴线）；
- 无法直接实现网格式结构。
于是更高层的思想出现了——二维布局。
第五阶段：Grid（网格布局）——“二维时代的排版革命”
背景
设计师思维是二维的，而 CSS 直到 Flex 仍是一维的。
于是 CSS Grid Layout（2017） 登场，成为第一个原生二维布局系统。
核心思想
“将页面划分成行与列的网格，元素按格定位。”
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto 200px;
gap: 10px;
}
优点
- 二维排布（行 + 列）；
- 精确控制对齐；
- 自适应能力极强；
- 与媒体查询天然配合。
与 Flex 的区别
| 对比项 | Flex | Grid |
|---|---|---|
| 维度 | 一维 | 二维 |
| 思维模型 | 流动 | 网格 |
| 应用场景 | 导航栏、按钮组 | 页面主框架、栅格系统 |
现代布局往往“Flex + Grid”混合使用。
Grid 定整体结构，Flex 处理局部排列。
总结：CSS 排版布局的历史脉络
| 阶段 | 时代背景 | 技术核心 | 思维特征 | 代表方案 |
|---|---|---|---|---|
| 表格布局 | 静态网页初期 | <table> | 硬编码结构 | 表格排版 |
| 浮动布局 | CSS1 时代 | float + clear | 流体排版 | 两栏三栏 |
| 定位布局 | CSS2 时代 | position | 坐标定位 | 绝对布局 |
| 弹性布局 | 移动时代 | flexbox | 容器驱动 | 弹性适配 |
| 网格布局 | 模块化时代 | grid | 二维结构化 | 栅格系统 |
排版布局学习路线建议
1️⃣ 理解“文档流”
→ 所有布局的本原。
2️⃣ 掌握“盒模型”
→ 所有元素的物理形态。
3️⃣ 学习“浮动与定位”
→ 认识“脱离流”的含义。
4️⃣ 掌握 Flex 一维布局
→ 解决排列问题。
5️⃣ 掌握 Grid 二维布局
→ 解决结构问题。
6️⃣ 理解 BFC、层叠上下文
→ 解决冲突与覆盖问题。
