在CSS常规文档流布局中，相邻块级元素的垂直外边距会发生合并，这就是边距塌陷现象，当多个div盒子在容器内排列时，最后一个盒子的下边距很可能和容器的下边距合并，导致盒子下边缘无法和容器下边缘对齐。而Flexbox和Grid布局都属于CSS弹性布局体系，其内部的子元素不会触发边距塌陷规则，同时提供了专门的对齐属性，可以轻松实现多个div盒子下边缘与容器下边缘对齐的需求。
边距塌陷问题的产生原因
边距塌陷主要发生在常规文档流的块级元素之间，分为三种情况：相邻兄弟元素的外边距合并、父子元素的外边距合并、空元素的外边距合并。在多div盒子排列的场景中，最常见的是相邻兄弟元素的下边距和上边距合并，以及最后一个子div的下边距和容器下边距合并，这两种情况都会导致子盒子的实际位置偏离预期，无法和容器下边缘对齐。
比如下面的常规文档流代码就会出现边距塌陷问题：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.container {
width: 500px;
border: 2px solid #333;
padding: 10px;
}
.box {
width: 100%;
height: 80px;
margin: 20px 0;
background-color: #e6f7ff;
border: 1px solid #91d5ff;
}
</style>
</head>
<body>
<div class="container">
<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div class="box">盒子3</div>
</div>
</body>
</html>
上述代码中，每个box的上下边距都是20px，相邻盒子的边距会合并为20px，最后一个盒子的下边距还会和容器的下边距合并，导致最后一个盒子的下边缘和容器下边缘之间有10px的padding间隙，无法对齐。
使用Flexbox布局解决对齐问题
Flexbox布局中，容器设置为display: flex后，内部的子元素会成为弹性项目，不再遵循常规文档流的边距规则，边距塌陷问题会直接消失。要实现多个div下边缘和容器下边缘对齐，只需要设置容器的flex-direction为column，同时设置justify-content为flex-end即可。
Flexbox实现核心属性说明
- display: flex：将容器定义为Flexbox布局容器
- flex-direction: column：设置弹性项目按垂直方向排列，和常规文档流的排列方向一致
- justify-content: flex-end：设置弹性项目在垂直方向的对齐方式为靠下对齐，所有子项目的下边缘会和容器的下边缘对齐
完整实现代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.container {
width: 500px;
height: 400px; /* 给容器固定高度，方便观察对齐效果 */
border: 2px solid #333;
padding: 10px;
/* Flexbox核心配置 */
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.box {
width: 100%;
height: 80px;
margin: 10px 0; /* 边距不会塌陷，相邻盒子间距为20px */
background-color: #e6f7ff;
border: 1px solid #91d5ff;
}
</style>
</head>
<body>
<div class="container">
<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div class="box">盒子3</div>
</div>
</body>
</html>
上述代码中，容器设置了固定高度400px，弹性项目按列排列，靠下对齐，所有box的下边缘会和容器下边缘对齐，每个盒子的上下边距10px会正常生效，相邻盒子之间的间距为20px，不会出现边距塌陷的情况。
使用Grid布局解决对齐问题
Grid布局是二维布局方案，同样不会触发边距塌陷规则，实现多div下边缘对齐的方式更加灵活。可以将容器设置为display: grid，定义垂直方向的行轨道，然后设置内容靠下对齐即可。
Grid实现核心属性说明
- display: grid：将容器定义为Grid布局容器
- grid-template-rows: repeat(auto-fill, 80px)：自动生成高度80px的行轨道，每个div占一行
- align-content: end：设置网格内容在垂直方向靠下对齐，所有网格项的下边缘会和容器下边缘对齐
完整实现代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.container {
width: 500px;
height: 400px; /* 固定容器高度，方便观察对齐效果 */
border: 2px solid #333;
padding: 10px;
/* Grid核心配置 */
display: grid;
grid-template-rows: repeat(3, 80px); /* 三个行轨道，每个高度80px */
gap: 20px; /* 网格项之间的间距，替代margin */
align-content: end;
}
.box {
width: 100%;
height: 80px;
background-color: #f6ffed;
border: 1px solid #b7eb8f;
}
</style>
</head>
<body>
<div class="container">
<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div class="box">盒子3</div>
</div>
</body>
</html>
上述代码中，Grid布局使用gap属性设置网格项之间的间距，完全不需要使用margin，从根源上避免了边距相关的问题。align-content: end会让所有网格项靠容器下边缘排列，实现完美的下边缘对齐效果。
两种布局方案的对比
Flexbox和Grid都能解决边距塌陷并实现下边缘对齐，适用场景略有不同：
| 对比维度 | Flexbox方案 | Grid方案 |
|---|---|---|
| 布局维度 | 一维布局，更适合线性排列场景 | 二维布局，适合复杂网格排列场景 |
| 间距控制 | 使用margin控制间距，需要手动计算 | 使用gap控制间距，配置更简洁 |
| 对齐属性 | justify-content控制主轴对齐 | align-content控制整体网格对齐 |
如果只需要简单的垂直排列多个div，Flexbox方案代码更简洁；如果后续可能需要扩展为复杂的网格布局，Grid方案的扩展性更好。两种方案都能完美规避边距塌陷问题，开发者可以根据实际需求选择。