常见的 CSS 布局方式

1. 普通流（标准流 / 文档流）

特点：

• 块级元素（div, p, h1, section 等）默认垂直排列（独占一行）。
• 行内元素（span, a, img 等）默认水平排列（内容决定大小）。不能设置宽和高

<div>块级元素 1</div>
<div>块级元素 2</div>
<span>行内元素 1</span>
<span>行内元素 2</span>

效果：

• div 元素垂直排列。
• span 元素水平排列，不换行。

2. 浮动布局（Float） 

特点：

• 让元素 向左或向右浮动，一直到父容器的边界，不占据原来的文档流位置。
• 需要 clear: both; 清除浮动，以防父元素高度塌陷。
• 

橙色为浮动元素，紫色为普通元素，黄色为父级元素。

普通元素中的文本元素，在上方有浮动元素时会绕开浮动元素从而不被遮挡。

3.三列布局

A左浮动，B右浮动，且A，B设置固定宽高，视A、B元素不存在，在C中添加元素，并为C添加大于浮动元素宽度的外边距，使得C中元素不被遮挡。

3. Flexbox（弹性布局）

特点：

• 适用于一维布局（水平或垂直）。
• 通过 display: flex; 实现灵活对齐、排列。

示例（水平排列）：

css

复制编辑

.container { display: flex; justify-content: space-between; /* 两端对齐 */ align-items: center; /* 垂直居中 */ } .box { width: 100px; height: 100px; background: lightcoral; }

html

复制编辑

<div class="container"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> </div>

常用属性：

属性	作用
justify-content	控制主轴对齐方式（水平）
align-items	控制交叉轴对齐方式（垂直）
flex-wrap	允许换行
flex-grow	控制元素伸展

✅ 适用于： 水平/垂直居中、导航栏、侧边栏布局。

---

4. Grid（网格布局）

特点：

• 适用于二维布局（既有行又有列）。
• 通过 display: grid; 让元素按网格排列。

示例（创建 3 列网格）：

css

复制编辑

.container { display: grid; grid-template-columns: repeat(3, 1fr); /* 3 列等宽 */ gap: 10px; /* 间距 */ } .box { height: 100px; background: lightgreen; }

html

复制编辑

<div class="container"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> </div>

常用属性：

属性	作用
grid-template-columns	定义列数和宽度
grid-template-rows	定义行数和高度
gap	设置间距
justify-items	水平方向对齐
align-items	垂直方向对齐

✅ 适用于： 卡片布局、后台面板、复杂页面布局。

---

5. 绝对定位（position: absolute）

特点：

• 让元素脱离文档流，不占据原来位置。
• 通过 top, left, right, bottom 进行定位。
• 需要设置 position: relative; 的父元素作为参照点。

示例（盒子固定在左上角）：

css

复制编辑

.container { position: relative; /* 设定参照物 */ width: 300px; height: 200px; background: lightgray; } .box { position: absolute; top: 10px; left: 10px; width: 50px; height: 50px; background: red; }

html

复制编辑

<div class="container"> <div class="box"></div> </div>

🚨 缺点：

• 容易导致布局混乱。
• 需要手动调整位置，不如 Flexbox 和 Grid 灵活。

✅ 适用于： 浮动按钮、固定头部导航、弹出层。

---

6. 固定定位（position: fixed）

特点：

• 元素固定在页面某个位置，不会随滚动条滚动。
• 适用于悬浮导航、返回顶部按钮。

示例（右下角固定按钮）：

css

复制编辑

.fixed-btn { position: fixed; bottom: 20px; right: 20px; width: 50px; height: 50px; background: blue; color: white; text-align: center; line-height: 50px; border-radius: 50%; }

html

复制编辑

<div class="fixed-btn">↑</div>

✅ 适用于： 固定导航栏、返回顶部按钮、侧边客服按钮。

---

7. Sticky（粘性定位）

特点：

• 结合 relative 和 fixed，元素在一定位置固定，但随页面滚动。
• 适用于吸顶导航。

示例（滚动到顶部后固定）：

css

复制编辑

.sticky-header { position: sticky; top: 0; background: yellow; padding: 10px; }

html

复制编辑

<div class="sticky-header">我是粘性头部</div> <p>（这里放很多内容，让页面可滚动）</p>

✅ 适用于： 表头固定、页面内导航。

---

8. 多列布局（column layout）

特点：

• 让文本或块级元素自动分成多列。
• 适用于杂志排版、新闻页面。

示例：

css

复制编辑

.multi-column { column-count: 3; /* 分成 3 列 */ column-gap: 20px; /* 列间距 */ }

html

复制编辑

<div class="multi-column"> <p>这里是很多很多的文本，会被自动分成 3 列。</p> </div>

✅ 适用于： 文章排版、新闻页面。