margin重叠该怎么解决？

在CSS中，当两个或多个垂直相邻的块级元素（如<div>）的margin相遇时，它们不会叠加成两个margin的和，而是会取两个margin中的较大值，这种现象被称为“margin重叠”（margin collapsing）。这种机制在布局中有时是有用的，但也可能导致不期望的布局效果。

要解决margin重叠问题，有几种方法：

1. 使用边框（border）或内边距（padding）

给其中一个元素添加边框或内边距可以阻止margin重叠。

<div class="box1">Box 1</div>  
<div class="box2">Box 2</div>  
  
<style>  
.box1, .box2 {  
    margin-bottom: 20px;  
    background-color: lightblue;  
}  
  
.box2 {  
    /* 添加边框或内边距 */  
    border-top: 1px solid transparent; /* 透明边框 */  
    /* 或者 */  
    /* padding-top: 1px; */  
}  
</style>

2. 使用overflow属性

给父元素设置overflow属性（除了visible以外的值，如auto、hidden或scroll）可以防止子元素的margin重叠。

<div class="container">  
    <div class="box1">Box 1</div>  
    <div class="box2">Box 2</div>  
</div>  
  
<style>  
.container {  
    overflow: auto; /* 阻止子元素margin重叠 */  
}  
  
.box1, .box2 {  
    margin-bottom: 20px;  
    background-color: lightblue;  
}  
</style>

3. 使用浮动（float）

浮动元素不会与其相邻元素发生margin重叠。

<div class="box1">Box 1</div>  
<div class="box2 float">Box 2</div>  
  
<style>  
.box1, .box2 {  
    margin-bottom: 20px;  
    background-color: lightblue;  
}  
  
.float {  
    float: left; /* 浮动元素 */  
    width: 100%; /* 如果需要占满整行 */  
}  
  
/* 清除浮动，如果需要 */  
.container::after {  
    content: "";  
    display: table;  
    clear: both;  
}  
</style>

4. 使用Flexbox或Grid布局

Flexbox和Grid布局中的项目不会经历传统的margin重叠。

<div class="container flex">  
    <div class="box1">Box 1</div>  
    <div class="box2">Box 2</div>  
</div>  
  
<style>  
.flex {  
    display: flex;  
    flex-direction: column; /* 垂直排列 */  
}  
  
.box1, .box2 {  
    margin-bottom: 20px;  
    background-color: lightblue;  
}  
  
/* 对于Grid */  
/*  
.container {  
    display: grid;  
}  
  
.box1, .box2 {  
    grid-row: auto; /* 或具体行号 */  
    margin-bottom: 20px;  
    background-color: lightblue;  
}  
*/  
</style>

每种方法都有其适用场景，你可以根据具体需求选择最合适的方法。