一、布局：CSS 中最具挑战性的领域
如果问前端开发者“CSS 哪部分最难”，绝大多数人会回答：布局。
颜色、字体、间距这些属性相对直观——你想要红色就写 red，想要大字就写 24px。但布局不同。你想要“这个 div 在页面中间”，有至少五种写法，每种背后的原理完全不同。你想要“三栏自适应”，在十年前是噩梦，今天可以四行代码解决——但前提是你理解背后的机制。
布局不是记忆一堆属性和值，而是理解浏览器如何根据盒模型和格式化上下文来排列元素。这一篇的目标，就是帮你建立这个理解框架。
本篇将沿着一条历史线索展开——从最原始的正常流，到曾经的“黑科技”浮动，到定位的精确控制，再到现代的 Flexbox 和 Grid。这不是为了考古，而是因为：每种布局方案都解决了前一种的痛点，理解了演进的逻辑，你才能真正驾驭它们。
二、正常流：浏览器默认的排列规则
正常流是 CSS 布局的基石。当你没有施加任何布局属性时，元素就是按正常流排列的。
块级元素的排列
块级元素（<div>、<p>、<h1> 等）在正常流中从上到下垂直堆叠，每个元素独占一行。即使它的宽度只有 100px，它后面的块级元素也会另起一行，不会并排。
<div class="box1">盒子 1</div>
<div class="box2">盒子 2</div>
<div class="box3">盒子 3</div>三个盒子会上下叠放，即使你给它们设了 width: 100px，它们也不会并排。
行内元素的排列
行内元素（<span>、<a>、<strong> 等）在正常流中从左到右水平排列，直到一行排满才自动换行。
<span>文字一</span>
<span>文字二</span>
<span>文字三</span>三个 span 会排在同一行（如果空间足够）。行内元素的 width 和 height 设置无效，它们的尺寸由内容决定。
正常流的核心特征
- 块级元素垂直堆叠，行内元素水平排列。
- 元素的
margin在垂直方向上会发生外边距合并：两个相邻块级元素的上下 margin 会合并，取较大值而不是相加。比如上一个元素margin-bottom: 30px，下一个元素margin-top: 20px，它们之间的实际间距是 30px，不是 50px。 - 正常流是“流动”的——如果你改变浏览器窗口宽度，行内元素会自动重新换行，块级元素的宽度也会自动适应。
正常流是浏览器最擅长处理的布局方式，渲染性能最好。现代布局方案（Flexbox、Grid）也是建立在正常流的基础上的。
三、浮动：为文字环绕而生，曾被滥用于布局
float 属性最初的设计目的非常单纯：让图片被文字环绕，就像报纸杂志中的排版那样。
img {
float: left;
margin-right: 16px;
}图片会浮动到左侧，后面的文字会环绕在它周围。这是浮动最自然、最正确的用途。
浮动的三个值
float: left：元素浮动到左侧。float: right：元素浮动到右侧。float: none：默认值，不浮动。
浮动元素的特征
元素设置 float 后，会发生以下几件事：
- 脱离正常流：浮动元素不再占据正常流中的空间，后面的块级元素会当作它不存在，占据它的位置。
- 文字环绕：块级元素虽然占据了浮动元素的位置，但块级元素内部的文字（行内内容）会避开浮动元素，形成环绕效果。
- 宽度收缩：块级元素浮动后，宽度不再默认撑满父容器，而是收缩到内容所需的最小宽度（除非显式设置了
width）。
清除浮动：解决父容器高度塌陷
浮动元素脱离正常流后，它的父容器会“看不到”它，导致父容器的高度塌陷（高度为 0，如果父容器里只有浮动元素的话）。
<div class="parent">
<div class="float-child">我是浮动的</div>
</div>
<!-- parent 的高度为 0！因为浮动子元素脱离了正常流 -->解决方案——清除浮动（clearfix）：
/* 经典 clearfix 方案 */
.parent::after {
content: "";
display: block;
clear: both;
}clear: both 的意思是“我不允许左右两侧有浮动元素”。在父容器末尾插入一个看不见的块级元素并设置 clear: both，它会跑到所有浮动元素的下方，从而“撑开”父容器的高度。
浮动布局：一个时代的产物
在 Flexbox 普及之前，浮动曾被广泛用于多栏布局。但这是对 float 的滥用——它本是为文字环绕而设计的。浮动布局有很多坑：需要清除浮动、高度不一致、顺序不灵活。今天，你应该只在需要文字环绕图片时才用 float。布局的需求请交给 Flexbox 或 Grid。
四、定位：脱离正常流的精确控制
position 属性允许你把元素精确地放在某个位置上，完全脱离正常流的约束。
position: static（默认值）
元素处于正常流中。top、right、bottom、left 属性无效。
position: relative（相对定位）
元素仍然占据正常流中的原始空间，但可以通过 top/left 等属性相对于自己原来的位置进行偏移。
.box {
position: relative;
top: 20px; /* 向下偏移 20px */
left: 10px; /* 向右偏移 10px */
}其他元素不会因为这个偏移而调整位置——它们仍把这个元素当作在原位。这就像你把一个东西挪开了，但它的影子还留在原地。
核心用途：作为 position: absolute 子元素的定位参照容器。
position: absolute（绝对定位）
元素完全脱离正常流，不占据任何空间。它的位置由 top/right/bottom/left 相对于最近的定位祖先（即最近一个 position 不为 static 的祖先元素）来确定。如果找不到定位祖先，则相对于 <body> 定位。
.parent {
position: relative; /* 作为定位参照 */
}
.child {
position: absolute;
top: 10px;
right: 10px; /* 相对于 .parent 的右上角 */
}核心用途：弹出层、下拉菜单、图标角标、模态框内部布局等需要“脱离正常流并精确定位”的场景。
position: fixed（固定定位）
和 absolute 类似，但定位参照不是祖先元素，而是浏览器视口。滚动页面时，fixed 元素保持在屏幕上的固定位置不动。
.top-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: white;
}核心用途：固定在顶部的导航栏、回到顶部按钮、固定底部的操作栏。
position: sticky（粘性定位）
这是一个“混合体”：元素在正常流中占据空间，但当页面滚动到某个阈值时，它会“粘住”不动，表现得像 fixed。
.section-title {
position: sticky;
top: 0; /* 当元素顶部距离视口顶部 0px 时开始粘住 */
background: white;
}核心用途：表格的表头、列表的分组标题、侧边栏的固定部分。相比 fixed，sticky 不脱离正常流，不会导致下方内容突然上跳。
z-index：控制层叠顺序
当多个定位元素重叠时，z-index 决定谁在上方。值越大越靠上。注意：z-index 只对 position 不为 static 的元素有效。
.modal-overlay {
position: fixed;
z-index: 1000; /* 覆盖在所有内容之上 */
}五、Flexbox：一维布局的现代方案
Flexbox（弹性盒子布局）于 2009 年提出，2012 年左右被主流浏览器支持，2017 年后成为布局标配。它专为解决一维布局（一行或一列中的元素排列）而设计。
核心概念：容器与项目
Flexbox 的运作涉及两个角色：
- 弹性容器（flex container）：设置了
display: flex的元素。 - 弹性项目（flex items）：容器内部的直接子元素。
<div class="container"> <!-- 弹性容器 -->
<div>项目 A</div> <!-- 弹性项目 -->
<div>项目 B</div> <!-- 弹性项目 -->
<div>项目 C</div> <!-- 弹性项目 -->
</div>主轴与交叉轴
Flexbox 最核心的概念是主轴和交叉轴：
- 主轴：弹性项目排列的方向。默认是水平方向（从左到右）。
- 交叉轴：垂直于主轴的方向。默认是垂直方向（从上到下）。
理解这两个轴是使用 Flexbox 的关键。容器的属性分为两类：控制主轴的和控制交叉轴的。
容器的六个核心属性
| 属性 | 作用 | 常用值 |
|---|---|---|
flex-direction |
设置主轴方向 | row（默认，水平）、column（垂直） |
justify-content |
项目在主轴上的对齐 | center、space-between、space-around |
align-items |
项目在交叉轴上的对齐 | center、stretch（默认）、flex-start |
flex-wrap |
项目是否换行 | nowrap（默认）、wrap |
align-content |
多行时，行在交叉轴上的对齐 | center、space-between |
gap |
项目之间的间距 | 16px、1rem |
justify-content 的常用值（以水平主轴为例）：
flex-start：左对齐（默认）。center：居中。flex-end：右对齐。space-between：两端对齐，中间均匀分布。space-around：每个项目两侧有相等的间距。space-evenly：所有间隙（包括两端）完全相等。
项目的三个核心属性
| 属性 | 作用 | 常用值 |
|---|---|---|
flex-grow |
项目放大比例（默认 0，不放大） | 1（占满剩余空间） |
flex-shrink |
项目缩小比例（默认 1，空间不足时缩小） | 0（禁止缩小） |
flex-basis |
项目在主轴上的初始大小 | 200px、auto（默认） |
简写 flex 属性：flex: 1 等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0;，意思是“占满剩余空间，空间不足时可以缩小”。这是最常用的弹性分配写法。
Flexbox 实战：导航栏布局
.navbar {
display: flex;
justify-content: space-between; /* logo 靠左，菜单靠右 */
align-items: center; /* 垂直居中 */
padding: 0 20px;
background: #333;
color: white;
}
.navbar .menu {
display: flex;
gap: 24px; /* 菜单项之间的间距 */
list-style: none;
}六、Grid：二维布局的终极方案
如果说 Flexbox 是“一维布局之王”，CSS Grid 就是二维布局的终极答案。它可以同时控制行和列，让你的布局代码和视觉设计高度对应。
核心概念：网格容器与网格项目
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 三列，等宽 */
gap: 16px; /* 行和列的间距 */
}定义网格轨道：grid-template-columns 和 grid-template-rows
fr 单位是 Grid 最重要的创新。它代表“一份可用空间”。1fr 2fr 1fr 表示三列，中间列是两侧列的两倍宽。
.grid {
display: grid;
grid-template-columns: 200px 1fr 1fr; /* 第一列固定 200px，后两列均分剩余空间 */
grid-template-rows: auto 1fr auto; /* 第一行和第三行适应内容，中间行占满剩余高度 */
}经典布局：圣杯布局，四行代码
曾经让前端开发者头疼的“头部-侧栏-主体-侧栏-底部”布局，用 Grid 可以四行解决：
.layout {
display: grid;
grid-template-columns: 200px 1fr 200px;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}
.header { grid-column: 1 / 4; } /* 跨三列 */
.footer { grid-column: 1 / 4; } /* 跨三列 */项目放置：grid-column 和 grid-row
每个网格项目可以显式指定它占据哪些格子：
.featured {
grid-column: 1 / 3; /* 从第 1 条列线到第 3 条列线，即占两列 */
grid-row: 1 / 3; /* 占两行 */
}Flexbox vs Grid：如何选择
| 场景 | 推荐方案 |
|---|---|
| 导航栏、按钮组、标签列表（一维排列） | Flexbox |
| 页面整体布局、卡片网格、仪表盘（二维排列） | Grid |
| 需要在行和列两个维度上精确控制位置 | Grid |
| 内容尺寸未知，需要弹性伸缩 | Flexbox |
| 两者都可以时 | 选你更熟悉的那个 |
两者不是互斥的：Grid 容器里可以嵌套 Flexbox 项目，反之亦然。实际项目中经常混合使用。
七、布局方案的决策框架
面对一个布局需求，按以下顺序思考：
- 能用正常流解决吗？ 如果可以，就用正常流。它最简单、性能最好。
- 是一维排列（一行或一列）吗？ 用 Flexbox。
- 是二维排列（同时控制行和列）吗？ 用 Grid。
- 需要脱离正常流、覆盖在其他元素上方吗？ 用
position: absolute或fixed。 - 需要文字环绕图片吗？ 用
float。
这个决策框架能覆盖 95% 的布局场景。剩下的 5% 是它们的组合运用。
八、本篇综合演示：用 Grid 搭建一个完整页面
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Grid 页面布局演示</title>
<style>
body {
margin: 0;
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
min-height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 200px 1fr;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
}
header {
grid-area: header;
background: #2c3e50;
color: white;
padding: 16px 24px;
}
aside {
grid-area: sidebar;
background: #ecf0f1;
padding: 20px;
}
main {
grid-area: main;
padding: 24px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
align-content: start;
}
.card {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
footer {
grid-area: footer;
background: #2c3e50;
color: #aaa;
text-align: center;
padding: 16px;
font-size: 14px;
}
</style>
</head>
<body>
<header>
<h1>我的网站</h1>
</header>
<aside>
<h3>导航</h3>
<ul>
<li>首页</li>
<li>文章</li>
<li>关于</li>
</ul>
</aside>
<main>
<div class="card">
<h3>卡片 1</h3>
<p>这是一段描述文字。</p>
</div>
<div class="card">
<h3>卡片 2</h3>
<p>这是一段描述文字。</p>
</div>
<div class="card">
<h3>卡片 3</h3>
<p>这是一段描述文字。</p>
</div>
<div class="card">
<h3>卡片 4</h3>
<p>这是一段描述文字。</p>
</div>
<div class="card">
<h3>卡片 5</h3>
<p>这是一段描述文字。</p>
</div>
</main>
<footer>
<p>© 2026 我的网站。保留所有权利。</p>
</footer>
</body>
</html>代码解析：
- 页面整体使用
display: grid配合grid-template-areas，用可视化方式定义了“头部-侧栏-主体-底部”的经典布局。 - 主体区域（
<main>）内部又是一个 Grid，使用repeat(auto-fill, minmax(250px, 1fr))实现响应式卡片网格：每个卡片最小 250px，空间足够时自动增加列数，空间不足时自动减少列数——不需要任何媒体查询。 align-content: start让卡片从顶部开始排列，而不是默认的拉伸填满。
九、本篇小结
这一篇我们沿着历史脉络系统学习了 CSS 布局：
- 正常流：布局的基石。块级垂直堆叠，行内水平排列。
margin垂直方向会合并。 - 浮动：为文字环绕而生，被滥用于布局很多年。今天只应在文字环绕图片时使用。需要 clearfix 修复父容器高度塌陷。
- 定位：
relative（不脱离正常流，相对自己偏移）、absolute（脱离正常流，相对定位祖先定位）、fixed（相对视口固定）、sticky（混合体，滚动到阈值后固定）。z-index控制层叠顺序。 - Flexbox：一维布局方案。核心是主轴和交叉轴。容器属性（
justify-content、align-items、flex-wrap、gap）和项目属性（flex-grow、flex-shrink、flex-basis）。 - Grid：二维布局方案。
fr单位均分可用空间，grid-template-areas可视化布局，auto-fill+minmax实现无媒体查询的响应式。 - 决策框架：正常流 → Flexbox（一维）→ Grid（二维）→ 定位（脱离正常流覆盖）→ 浮动（文字环绕）。
布局是 CSS 中最需要练习的领域。建议你把每种布局方案都手写至少一个完整页面，逐渐建立起“看到设计稿就知道用什么布局方案”的直觉。
下一篇预告
下一篇，我们将进入 CSS 的最后一个核心机制——动画。从 transition（过渡）到 animation（关键帧动画），从性能优化的 transform 和 opacity 到减少重绘重排的最佳实践。你会学会如何让页面“优雅地动起来”，而不是“卡顿地闪一下”。
前端，每周更新。
暂无评论内容