CSS 布局是前端开发的核心技能之一，它决定了网页元素如何在浏览器中排列和展示。本文将从基础到进阶，系统性地介绍 CSS 布局的各种技术，帮助读者建立起完整的布局知识体系。
一、什么是 CSS 布局
CSS 布局技术允许开发者控制网页中元素的位置，包括它们相对于正常布局流、周边元素、父容器或者浏览器视口的位置。每种布局技术都有其独特的设计理念和适用场景，理解这些技术能够帮助我们在实际项目中选择最合适的布局方案。
1.1 正常布局流的概念
正常布局流是指在不进行任何布局控制时，浏览器默认的 HTML 元素排列方式。块级元素会按照源码顺序从上到下垂直排列，每个元素独占一行；内联元素则会在同一行内水平排列，像句子中的单词一样。
html
<p>这是第一个段落。</p>
<ul>
<li>列表项一</li>
<li>列表项二</li>
<li>列表项三</li>
</ul>
<p>这是第二个段落。</p>在上述代码中，浏览器会按照顺序显示：先显示第一个段落，然后是整个无序列表，最后是第二个段落。这是最基本的布局行为，对于多数简单页面来说，正常布局流已经足够使用。
块方向在英语等水平书写模式的语言中垂直运行，内联方向则是内容水平运行的方向。理解这两个概念有助于后续学习更复杂的布局技术。
二、display 属性的核心作用
display 属性是实现 CSS 布局的主要手段，它允许开发者改变元素的默认显示方式。每个元素在正常流中都有一个默认的 display 值，例如段落默认为 block，链接默认为 inline。
2.1 改变元素的显示行为
通过修改 display 属性，我们可以彻底改变元素的布局行为。例如，将列表项从纵向排列改为横向排列：
html
<style>
.inline-list li {
display: inline;
margin-right: 20px;
}
</style>
<ul class="inline-list">
<li>首页</li>
<li>关于我们</li>
<li>产品中心</li>
<li>联系我们</li>
</ul>在这个例子中，原本垂直排列的列表项变成了水平排列，就像一行文字中的单词一样。这种灵活性意味着我们可以根据语义选择 HTML 元素，而不必担心它们的外观，因为外观完全可以通过 CSS 来控制。
除了 block 和 inline，display 属性还支持 inline-block 值，它结合了两者的特点：元素像内联元素一样排列在一行中，但又可以设置宽度和高度等块级属性。
三、弹性盒子布局
Flexbox 是 CSS 弹性盒子布局模块的缩写，专门用于创建一维的页面布局，无论是水平方向还是垂直方向。它的核心思想是让容器有能力改变其子项的宽度、高度和顺序，以最佳方式填充可用空间。
3.1 创建 Flex 容器
要使用弹性盒子布局，只需在父元素上设置 display: flex，其所有直接子元素会自动成为 flex 项目并按照 flex 规则排列。
html
<style>
.flex-container {
display: flex;
background-color: #f0f0f0;
padding: 20px;
}
.flex-item {
background-color: #4CAF50;
color: white;
padding: 20px;
margin: 10px;
text-align: center;
}
</style>
<div class="flex-container">
<div class="flex-item">项目 1</div>
<div class="flex-item">项目 2</div>
<div class="flex-item">项目 3</div>
</div>在这个示例中，三个 div 元素默认会水平排列成一行，并且所有项目都会被拉伸到相同的高度。这是因为 flex 容器的初始属性决定了布局方向为行（flex-direction: row），并且项目在交叉轴上被拉伸（align-items: stretch）。
3.2 控制 Flex 项目的伸缩
flex 属性可以让项目根据可用空间自动伸缩，实现响应式布局。当给所有子项目设置 flex: 1 时，它们会平均分配容器中的剩余空间。
html
<style>
.flex-container {
display: flex;
width: 100%;
}
.flex-item {
flex: 1;
background-color: #2196F3;
color: white;
padding: 20px;
margin: 5px;
text-align: center;
}
.flex-item.special {
flex: 2;
background-color: #ff9800;
}
</style>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item special">2（占用两倍空间）</div>
<div class="flex-item">3</div>
</div>这里第一个和第三个项目各占用一份空间，第二个项目占用两份空间。flex 属性的值实际上是比例关系，浏览器会根据所有项目的 flex 值总和来计算每个项目应该占用的空间。
四、Grid 网格布局
Grid 布局是 CSS 中最强大的布局系统，它被设计用于同时在行和列两个维度上排列元素。与 Flexbox 的一维布局不同，Grid 是真正的二维布局系统。
4.1 创建网格容器
通过设置 display: grid 并定义行和列的轨道，可以快速创建一个网格布局。
html
<style>
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 100px;
gap: 10px;
background-color: #f0f0f0;
padding: 10px;
}
.grid-item {
background-color: #9C27B0;
color: white;
padding: 20px;
text-align: center;
}
</style>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
</div>这个例子创建了一个三列两行的网格，每列宽度为 1fr（可用空间的一份），每行高度为 100 像素。gap 属性设置了网格项之间的间距。六个子元素会自动填充到网格的单元格中，按照行优先的顺序排列。
4.2 显式放置网格项
Grid 布局允许开发者精确控制每个项目的位置，甚至可以让一个项目跨越多个单元格。
html
<style>
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 100px;
gap: 10px;
}
.item1 {
grid-column: 1 / 3;
grid-row: 1;
background-color: #f44336;
}
.item2 {
grid-column: 3;
grid-row: 1 / 3;
background-color: #4CAF50;
}
.item3 {
grid-column: 1;
grid-row: 2;
background-color: #2196F3;
}
.item4 {
grid-column: 2;
grid-row: 2;
background-color: #ff9800;
}
</style>
<div class="grid-container">
<div class="item1">项目 1（占两列）</div>
<div class="item2">项目 2（占两行）</div>
<div class="item3">项目 3</div>
<div class="item4">项目 4</div>
</div>在这个例子中，grid-column 和 grid-row 属性使用斜线语法，前面的数字表示起始线，后面的数字表示结束线。网格线编号从 1 开始，包括列线和行线。项目 1 从第 1 列线延伸到第 3 列线，横跨两列；项目 2 从第 1 行线延伸到第 3 行线，横跨两行。
五、浮动布局
浮动是 CSS 中历史悠久的布局技术，它让元素脱离正常文档流，向左或向右移动，直到碰到父元素边界或其他浮动元素。
5.1 实现文字环绕效果
浮动最常见的用途是实现文字环绕图片的效果，这是其他布局技术难以替代的功能。
html
<style>
.float-box {
float: left;
width: 150px;
height: 150px;
margin-right: 20px;
margin-bottom: 10px;
background-color: #ff9800;
padding: 15px;
color: white;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
</style>
<div class="clearfix">
<div class="float-box">浮动元素</div>
<p>这是一段很长的文字。浮动元素会脱离正常文档流，但文本内容会环绕在浮动元素周围。这种效果在新闻网站的文章页面中非常常见，用于实现图片与文字的混合排版。浏览器会自动计算文本的换行位置，确保文本不会覆盖浮动元素，而是优雅地环绕在其周围。</p>
</div>当元素设置为 float: left 后，它会向左移动，直到碰到父容器的左边界。后续的块级元素会忽略这个浮动元素，但内联元素（如文本）会环绕它。为了实现更复杂的布局，有时需要清除浮动，防止父容器高度塌陷。上面的代码使用了伪元素清除浮动的标准方法。
5.2 使用浮动创建多列布局
在 Flexbox 和 Grid 出现之前，浮动是创建多列布局的主要手段。
html
<style>
.column {
float: left;
width: 31.33%;
margin-right: 2%;
background-color: #e0e0e0;
padding: 15px;
box-sizing: border-box;
}
.column:last-child {
margin-right: 0;
}
.row::after {
content: "";
clear: both;
display: table;
}
</style>
<div class="row">
<div class="column">
<h3>第一列</h3>
<p>这是第一列的内容。使用浮动创建多列布局时，需要精确计算宽度，并处理外边距，避免内容溢出。</p>
</div>
<div class="column">
<h3>第二列</h3>
<p>这是第二列的内容。浮动布局的优点是兼容性好，在所有浏览器中都能正常工作。</p>
</div>
<div class="column">
<h3>第三列</h3>
<p>这是第三列的内容。但缺点是代码较为复杂，响应式处理也比较麻烦。</p>
</div>
</div>这里三列都向左浮动，每列宽度设置为百分比并减去外边距。由于浮动元素会脱离文档流，父容器不会自动包裹它们，所以需要使用 clearfix 技巧清除浮动，让父容器正确包裹所有子元素。
六、定位技术
定位技术允许开发者将元素从正常布局流中移出，精确控制其位置。理解定位对于处理弹出层、固定导航栏等场景至关重要。
6.1 相对定位与绝对定位
相对定位相对于元素原本的位置进行偏移，而绝对定位则完全脱离文档流，相对于最近的已定位祖先元素进行定位。
html
<style>
.container {
position: relative;
height: 300px;
background-color: #f5f5f5;
margin-top: 20px;
}
.relative-box {
position: relative;
top: 30px;
left: 30px;
background-color: #4CAF50;
padding: 15px;
color: white;
}
.absolute-box {
position: absolute;
bottom: 20px;
right: 20px;
background-color: #f44336;
padding: 15px;
color: white;
}
.normal-box {
background-color: #2196F3;
padding: 15px;
color: white;
margin-top: 10px;
}
</style>
<div class="container">
<div class="relative-box">相对定位：相对于原位置向下向右移动 30px</div>
<div class="normal-box">正常布局流的块级元素</div>
<div class="absolute-box">绝对定位：相对于 .container 定位</div>
</div>相对定位的元素仍然占据文档流中的原始空间，top 和 left 属性相对于其原始位置偏移。绝对定位的元素完全脱离文档流，不再占据空间，其他元素会忽略它的存在。绝对定位的参考点是最近的具有非 static 定位的祖先元素，如果没有这样的祖先，则相对于初始包含块（通常是 html 元素）。
6.2 固定定位与粘性定位
固定定位相对于浏览器视口定位，滚动时位置不变；粘性定位则是相对定位和固定定位的混合体。
html
<style>
.fixed-nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #333;
color: white;
padding: 15px;
text-align: center;
z-index: 100;
}
.sticky-box {
position: sticky;
top: 60px;
background-color: #ff9800;
padding: 15px;
color: white;
margin: 20px 0;
}
.content {
height: 800px;
background: linear-gradient(to bottom, #e0e0e0, #f5f5f5);
padding: 20px;
margin-top: 70px;
}
</style>
<div class="fixed-nav">固定导航栏：滚动时始终在顶部</div>
<div class="content">
<p>正常内容区域</p>
<div class="sticky-box">粘性元素：滚动到距离顶部 60px 时固定</div>
<p>继续滚动，粘性元素会在到达指定位置后固定，直到其父容器滚出视口。</p>
</div>固定定位的元素会固定在视口的指定位置，不随滚动而移动，常用于实现始终可见的导航栏或返回顶部按钮。粘性定位的元素在未达到阈值时表现如相对定位，达到阈值后表现如固定定位，非常适合实现分区标题在滚动时的吸顶效果。
七、CSS 表格布局
虽然 HTML 表格主要用于展示数据，但 CSS 表格布局可以应用于任何元素，实现类似表格的布局效果。
7.1 创建 CSS 表格布局
通过设置 display 属性为 table、table-row、table-cell 等值，可以让普通元素像表格元素一样排列。
html
<style>
.form-table {
display: table;
width: 100%;
max-width: 600px;
margin: 0 auto;
border-collapse: collapse;
}
.form-row {
display: table-row;
}
.form-label {
display: table-cell;
width: 120px;
padding: 10px;
background-color: #f0f0f0;
font-weight: bold;
vertical-align: middle;
}
.form-field {
display: table-cell;
padding: 10px;
}
.form-field input,
.form-field select {
width: 100%;
padding: 8px;
box-sizing: border-box;
}
.form-caption {
display: table-caption;
caption-side: top;
background-color: #4CAF50;
color: white;
padding: 10px;
font-size: 1.2em;
}
</style>
<div class="form-table">
<div class="form-caption">用户信息登记表</div>
<div class="form-row">
<div class="form-label">姓名</div>
<div class="form-field"><input type="text" placeholder="请输入姓名"></div>
</div>
<div class="form-row">
<div class="form-label">邮箱</div>
<div class="form-field"><input type="email" placeholder="请输入邮箱"></div>
</div>
<div class="form-row">
<div class="form-label">部门</div>
<div class="form-field">
<select>
<option>技术部</option>
<option>市场部</option>
<option>运营部</option>
</select>
</div>
</div>
</div>CSS 表格布局会自动平衡列宽，同一列的所有单元格宽度相同，无需手动计算。这种方法特别适合创建表单布局，可以轻松实现标签和输入框的对齐。表格布局在 IE 浏览器中有很好的兼容性，在某些需要支持老旧浏览器的项目中仍然是可行的选择。
八、多列布局
多列布局模块允许内容像报纸一样分成多列排列，适合于长文本的展示，可以提高阅读效率。
8.1 创建多列布局
使用 column-count 或 column-width 属性可以轻松创建多列布局。
html
<style>
.multicol-container {
column-count: 3;
column-gap: 30px;
column-rule: 1px solid #ccc;
padding: 20px;
background-color: #f9f9f9;
}
.multicol-container h2 {
column-span: all;
background-color: #4CAF50;
color: white;
padding: 10px;
margin-top: 0;
}
.responsive-multicol {
column-width: 250px;
column-gap: 20px;
padding: 20px;
}
</style>
<div class="multicol-container">
<h2>报纸风格的多列布局</h2>
<p>这是第一段文字。多列布局可以将长文本分成多列，就像报纸和杂志中的排版方式一样。这种布局方式特别适合于文章页面、博客内容等长文本的展示。</p>
<p>这是第二段文字。通过设置 column-gap 可以控制列与列之间的间距，column-rule 可以添加列之间的分隔线，增强视觉效果。用户阅读时视线在列间移动，可以减少垂直滚动的疲劳感。</p>
<p>这是第三段文字。column-span 属性可以让某些元素横跨所有列，非常适合用于标题或重要提示的展示。这种布局方式在现代浏览器中得到了广泛支持。</p>
</div>
<div class="responsive-multicol">
<h3>响应式多列</h3>
<p>使用 column-width 属性时，浏览器会根据容器宽度自动创建尽可能多的指定宽度的列。这种方式天生具有响应式特性，当视口变窄时，列数会自动减少，无需额外的媒体查询代码。</p>
</div>column-count 指定固定的列数，适用于已知列数的场景。column-width 指定最小列宽，浏览器会自动计算列数，更适合响应式设计。多列布局中的内容会自动平衡各列的高度，浏览器会智能地安排段落和标题的分栏位置。
总结
CSS 布局技术经历了从表格布局、浮动布局到 Flexbox、Grid 布局的演进过程。每种技术都有其适用的场景：浮动适合文字环绕效果，定位用于元素的精确控制，Flexbox 擅长一维排列，Grid 则是最强大的二维布局系统。在实际开发中，这些技术往往需要组合使用，取长补短。掌握这些布局技术是成为合格前端开发者的必经之路，建议读者在实际项目中多加练习，深入理解每种布局的特性。随着 CSS 标准的不断发展，布局技术也在持续进化，保持学习的热情才能跟上技术的步伐。
还在纠结 CSS 样式写得杂乱无章、布局频频踩坑？收藏此文持续跟进，后续分享 CSS 高效简写、兼容适配方案、经典布局案例、样式避坑干货，从基础样式到实战排版一站式学透，快速提升前端页面编写能力！