一、概述与目标
CSS 布局是网页设计的核心技术，主要用于控制页面元素的排列与呈现方式。目前主流的布局方案包括常规文档流布局、模式转换布局、弹性布局（Flexbox）、定位布局、网格布局（Grid）和多列布局。
接下来我们会逐一拆解它们的优缺点与适用场景，帮你快速看懂主流官网的布局实现思路。
二、常规文档流布局
这是浏览器的默认排版，是 CSS 布局的基础，页面大结构依靠块元素上下堆叠实现。包含块元素和行内元素，文档流方向默认从上到下、从左到右排列。
| 块元素（block） | 独占一行，宽度默认撑满容器；可设置宽高，呈垂直排列；举例：div、p、h1~h6 |
|---|---|
| 行内元素（inline） | 水平依次排列，容器宽度不足则换行；宽高由内容决定，无法直接设置；举例：span、img、strong |
三、模式转换布局
如上图所示，需求要求我们把块级盒子展示为一行，或者要求行内元素有更大的点击范围，我们改怎么办呢？
那么就需要用到display转换， 我们可以将上面两种元素的display属性设置为inline-block, 可实现上述效果
display转换为 inline-block后，可以设置宽高，又不用独占一行，这种特点让它可以广泛应用于让块级盒子一行显示或让行内盒子具备宽高的场景
| 属性值 | 是否独占一行 | 能否设置宽高 | 默认宽度 |
|---|---|---|---|
| display: block | 是 | ✔️ | 撑满容器宽度 |
| display: inline | 否 | ❌ | 由内容决定 |
| display: inline-block | 否 | ✔️ | 由内容决定（可覆盖） |
但是使用行内块元素需要注意： 元素间会有空隙，需要给父元素设font-size: 0，因此适合对间距要求不高的场景，如果精细排版建议用 Flex或Grid。
四、被逐渐替代的float
float最早是做"文字环绕"效果的，如下图所示
float可以让元素脱离文档流向左或向右浮动， 但这会导致父容器高度塌陷，从而影响周围元素的布局，例如下图1所示。而很多时候我们是不能给父容器规定高度的，它的高度取决于后台服务返回的数据量，例如京东的这个商品列表展示，随着鼠标的滚动，商品不断增多，高度不断增加，这个时候我们怎么办呢？
这个时候我们就要进行清除浮动了，主要有以下四种方法
1、双伪元素清除浮动
2、单伪元素清除浮动
3、额外标签法：在浮动元素最后新增块级标签，但增加冗余标签
4、overflow 清除浮动：触发 BFC 包裹浮动元素
因为float问题太多， 要手动解决 "高度塌陷"，还得写额外代码清除浮动， 排版稍微复杂点就容易错位，对新手很不友好， 现在有更简单的 Flex/Grid 布局，又灵活又不存在上述问题，所以浮动就成 "时代的眼泪"了
五、弹性布局
Flexbox是Flexible Box Layout Module（弹性盒子布局模块）的缩写，可以快速实现元素的对齐、分布和空间分配。例如京东、淘宝、小米等主流网站都使用了flex布局，而且我们的低代码平台也可以设置元素为flex布局
我们为啥要使用flex布局呢？
以B站头部为例，想要实现下图的效果，三个块级元素并排在一行，实现两端对齐的效果，用之前的办法，可能要变成行内块、给margin或者padding来实现，或者干脆采用浮动的办法，那么实现垂直居中该怎么办呢？
垂直居中是传统布局的 "老大难"，有的同学可能说使用line-height，但是line-height是无法让块级的盒子垂直居中，这个时候我们可以使用flex，只需要三行代码（display: flex;align-items: center;justify-content: space-between;）就可以实现B站头部的布局效果，我们公司的官网头部也是类似的实现方案
1、flex布局的核心
父控子：父盒子控制子盒子如何排列布局（父盒子称为容器，子盒子称为项目），控制属性要写在父元素身上；
轴方向：主轴默认水平、交叉轴默认垂直，可自定义。
2、flex的属性
父盒子属性
| 属性 | 作用说明 | 所有可选值 |
|---|---|---|
| display | 定义元素为 Flex 容器 | flex |
| flex-direction | 定义主轴方向（项目排列方向） | row（默认，水平从左到右）、row-reverse（水平从右到左）、column（垂直从上到下）、column-reverse（垂直从下到上） |
| flex-wrap | 控制项目是否换行 | nowrap（默认，不换行）、wrap（换行，第一行在上）、wrap-reverse（换行，第一行在下） |
| justify-content | 定义主轴上的对齐方式（项目整体分布） | flex-start（默认，靠主轴起点）、flex-end（靠主轴终点）、center（居中）、space-between（两端对齐，项目间间距相等）、space-around（项目两侧间距相等）、space-evenly（项目间间距完全相等） |
| align-items | 定义交叉轴上的对齐方式（单行时项目整体对齐） | stretch（默认，拉伸填满容器）、flex-start（靠交叉轴起点）、flex-end（靠交叉轴终点）、center（垂直居中）、 |
| align-content | 定义多行时交叉轴上的对齐方式（仅当 flex-wrap: wrap 且内容换行时生效） | stretch（默认，拉伸填满容器）、flex-start（靠交叉轴起点）、flex-end（靠交叉轴终点）、center（居中）、space-between（两端对齐）、space-around（项目行两侧间距相等） |
项目属性：
| 属性 | 作用说明 | 所有可选值 / 取值规则 |
|---|---|---|
| order | 定义项目的排列顺序（默认 0，数值越小越靠前） | 任意整数（正整数 / 负整数 / 0），无单位 |
| flex-grow | 定义项目的放大比例（默认 0，即不放大） | 非负数字（0 / 正小数 / 正整数），无单位；数值越大，占剩余空间比例越高 |
| flex-shrink | 定义项目的缩小比例（默认 1，空间不足时等比缩小） | 非负数字（0 / 正小数 / 正整数），无单位；设为 0 则空间不足时不缩小 |
| flex-basis | 定义项目在主轴方向上的初始大小（优先级高于 width/height） | 1. 长度值（px/em/rem/% 等）；2. auto（默认，取项目自身宽高）；3. content（按内容自适应） |
| flex | flex-grow、flex-shrink、flex-basis 的简写 | 1. 常用简写：- flex: 1 → 等价于 flex: 1 1 auto- flex: auto → 等价于 flex: 1 1 auto- flex: none → 等价于 flex: 0 0 auto2. 完整写法：flex: |
| align-self | 覆盖容器的 align-items，单独定义某个项目的交叉轴对齐方式 | auto（默认，继承容器 align-items）、stretch、flex-start、flex-end、center、baseline |
3、使用场景
3.1实现基础横向并排 + 垂直居中（导航栏核心效果）
3 个子元素水平并排，且在父盒子中垂直居中（对应 B 站头部核心布局）
css
/* 父容器（控制子元素） */
.container {
...
display: flex; /* 开启Flex */
align-items: center; /* 交叉轴（垂直）居中 */
...
}
3.2实现横向两端对齐（导航栏左右分布效果）
logo 居左、登录按钮居右，且两者都垂直居中（网页头部通用布局）。
css
.container {
...
display: flex;
align-items: center;
justify-content: space-between; /* 主轴（水平）两端对齐 */
...
}3.3实现横向平均分布（卡片列表效果）
3 个卡片水平平均分布，间距一致（商品列表 / 功能入口常用）。
css
.container {
...
display: flex;
align-items: center;
justify-content: space-around; /* 主轴平均分布（项目两侧间距相等） */
...
}3.4实现垂直排列（侧边栏）
子元素垂直排列（更改主轴方向），且垂直居中（侧边栏核心布局）。
css
.container {
...
display: flex;
flex-direction: column; /* 更改主轴为垂直方向 */
justify-content: center; /* 主轴（垂直）居中 */
gap: 10px; /* 项目间距（替代margin） */
...
}3.5实现自动换行（响应式卡片）
元素超出父容器宽度自动换行（响应式布局核心）。
css
.container {
...
width: 800px;
display: flex;
flex-wrap: wrap; /* 超出容器宽度自动换行 */
gap: 15px;
...
}
.item {
width: 220px;
height: 120px;
...
}3.6实现子元素占满剩余空间（搜索框布局）
搜索框自动占满左右元素的剩余空间（网页搜索栏通用布局）。
css
.container {
width: 800px;
height: 80px;
border: 1px solid #ccc;
display: flex;
align-items: center;
...
}
.left {
width: 80px;
height: 40px;
...
}
.search {
flex: 1; /* 占满主轴剩余空间 */
height: 40px;
...
}
.right {
width: 80px;
height: 40px;
line-height: 40px;
...
}3.7实现整体居中（登录框 / 弹窗）
在页面中水平 + 垂直居中
css
body {
margin: 0;
height: 100vh; /* 占满视口高度 */
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
...
}
.login-box {
width: 400px;
height: 300px;
line-height: 300px;
...
}3.8实现自定义子元素顺序
元素显示顺序为 菜单 2 → 菜单 3 → 菜单 1（无需修改 HTML 结构，仅通过 CSS 调整）。
css
.container {
...
display: flex;
align-items: center
...
}
.item {
width: 100px;
height: 60px;
...
}
/* 自定义顺序（默认0，数值越小越靠前） */
.item1 { order: 3; }
.item2 { order: 1; }
.item3 { order: 2; }4、真实应用场景
4.1 百度图片-模仿瀑布流效果
五个块级列容器通过 Flex 水平均分排列（各占父容器 1/5 宽度），每个列容器内垂直排布图片、按钮等内容。
4.2 京东-无限滚动展示商品列表 
父容器设 Flex 并允许换行，子元素通过媒体查询 + 宽高限制，实现不同屏幕下自动调整每行展示数量，超出则换行。
淘宝也跟京东一样，使用flex布局来实现的无限滚动展示商品，但是如果你需要更复杂的响应式布局，需精准控制行列、页面多模块分区时就要使用grid了
六、定位布局
定位布局是控制页面元素位置的核心技术，能实现元素脱离文档流、层叠、固定位置等效果。 例如下图中B站首页，很多效果都是使用定位布局实现的。
常见场景:
固定导航栏：页面滚动时，导航栏始终固定在视口顶部
吸顶效果：元素滚动到特定位置后固定
弹出 / 下拉菜单：鼠标悬浮时显示
悬浮效果：元素浮在其他元素上方
定位分类
- 相对定位：元素相对自身原位置偏移，不脱离文档流，保留原占位
- 绝对定位：元素相对最近的已定位父元素偏移，完全脱离文档流，不保留占位
- 固定定位：元素相对浏览器视口固定，脱离文档流，滚动页面时位置不变
- 粘性定位：元素在滚动到指定阈值前是相对定位，之后变为固定定位，结合两者特性
1、 场景一：子绝父相实现购物车效果
为什么用 "子绝父相"？
子元素用绝对定位：能浮在上方，且不占位置、不影响其他元素布局，而父元素用相对定位，让子元素能跟着父元素移动（作为定位参考），同时父元素保留原占位、不影响其他布局，例如下图。
xml
<style>
/* 父元素：购物车按钮（相对定位） */
.cart-btn {
position: relative; /* 父相 */
...
}
/* 子元素：数量标记（绝对定位） */
.cart-count {
position: absolute; /* 子绝 */
top: -5px; /* 向上偏移 */
right: -5px; /* 向右偏移 */
width: 18px;
height: 18px;
...
}
</style>
<button class="cart-btn">
我的购物车
<span class="cart-count">3</span>
</button>小米官网swiper组件左右翻页的箭头也是采用子绝父相的做法，将左右箭头先使用top调整到50%的高度，然后再使用margin-top往上调整为自身高度的一半，从而实现在swiper中垂直居中效果，如下图所示
2、 场景二：固定定位实顶部导航栏和侧边悬浮导航
例如下图中官网导航栏和右侧悬浮按钮，就是使用固定定位实现的
3、 场景三：粘性定位实现低代码卡片 tab 标签页吸顶效果
七、网格布局
网格布局是二维布局模型，通过定义行（rows）和列（columns），精准控制网页元素的位置、尺寸，还能实现响应式设计。
网格布局具有上述优势，我们是不是可以抛弃弹性布局，全部使用网格布局呢？
事实上，实际开发中 flex 和 grid 常混用：
Flex：适合快速做一维布局、动态对齐内容（比如单行布局） 等线性排列场景
Grid：适合搭建复杂页面框架，可同时控制行和列的排列，实现真正的二维布局。
例如下图中B站首页布局就是 flex 和 grid 混用实现的
场景1：实现B站11列2行竖向排列导航栏效果，同时控行列
css
/* 1列2行，竖向排列 */
.bilibili-nav {
...
display: grid;
/* 核心：列优先排列（竖向填充） */
grid-auto-flow: column;
/* 定义2行（每行高度均分） */
grid-template-rows: repeat(2, 1fr);
/* 定义11列（每列宽度均分） */
grid-template-columns: repeat(11, 1fr);
...
}
场景2：实现阿里巴巴矢量图标库响应式卡片布局（适配手机 / 平板 / PC）
如下图效果，可以直接使用grid布局实现，无须借助媒体查询
css
...
/* 卡片网格容器 */
.card-grid {
display: grid;
gap: 20px; /* 卡片之间的水平+垂直间距（无需margin，避免重叠） */
/* 核心：自动适配列数，列宽最小250px，最大自适应 */
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
...
场景3：实现蔚来汽车官网"2 行 3 列 + 汽车图跨 2 列"效果
css
...
/* 红框网格容器 */
.nio-grid-container {
display: grid;
/* 行列比例：匹配2行3列+大元素跨列 */
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
...
}
/* 1. 汽车图（跨1行2列） */
.item-car {
grid-area: 1 / 1 / 2 / 3; /* 行1-2，列1-3 → 跨2列 */
}
/* 2. 右上角"生长" */
.item-grow {
grid-area: 1 / 3 / 2 / 4;
}
/* 3. 中间右侧"11" */
.item-11 {
grid-area: 2 / 3 / 3 / 4;
}
/* 4. 左下角元素 */
.item-left-bottom {
grid-area: 2 / 1 / 3 / 2;
}
/* 5. 中间下元素 */
.item-middle-bottom {
grid-area: 2 / 2 / 3 / 3;
}
</style>
简单来说，Grid 是 "为复杂二维布局而生"，能以更少的代码实现更灵活、可控的布局，尤其适合页面框架、响应式卡片、复杂图文组合等场景。
八、多列布局
用于将元素内容自动分割为指定数量的垂直列，如下图效果。有些同学可能会说，下面的布局我们用flex或者grid也能做出来，那么为什么要再学习多列布局呢？
因为如果使用flex或者grid布局，我们需要先准备三个盒子，然后再把内容装进去，而使用多列布局则不需要事先准备盒子，直接准备内容就可以了，如下代码所示
css
/* 容器：设置多列 */
.column-container {
...
/* 多列核心属性 */
column-count: 3; /* 分为3列 */
column-gap: 10px; /* 列之间的间隙 */
column-rule: 2px solid #4da6ff; /* 列分隔线 */
...
}
/* 子元素：不同高度模拟不规则布局 */
.item {
...
break-inside: avoid; /* 避免子元素被列分割 */
...
}适用场景
- 长文章分栏：文章自动分列，支持间隙、响应式效果，如语雀官网效果
- 图片瀑布流，如阿里巴巴矢量图标库
九、总结
不同技术各有适用场景、优缺点，需配合使用：
- 简单布局：优先用 Flexbox（一维）或 Grid（二维）
- 复杂响应式布局：Grid + 媒体查询
- 文本内容分栏：多列布局（column-count）
- 兼容旧浏览器：浮动布局，或 Flexbox 降级方案
- 趋势：CSS Grid 逐渐成为主流，适配更复杂布局场景