垂直方向margin重叠和margin坍塌问题

垂直方向margin重叠是兄弟元素之间

<div class="container">
    <div class="A">A</div>
    <div class="B">B</div>
</div>

.A, .B {
    width: 100px;
    height: 100px;
    background: aqua;
    border: 1px solid #333;
}

.A {
    margin: 20px 10px;
}

.B {
    margin: 20px 10px;
}

A和B垂直方向并不会是40px，而是20px，因为产生了重叠

解决办法

1. 在A和B盒子之间添加一个空白div（我觉得这个方法比较好，没啥副作用）
2. 让B盒子浮动或者让B盒子display: inline-block
3. 把B包裹在BFC中

不过我觉得垂直方法不要上下都margin吧，设置一个margin-bottom就好了。

margin坍塌问题是属于父子元素的

.wrapper {
    width: 200px;
    height: 200px;
    background: aqua;
    margin-top: 100px;
}

.box {
    width: 50px;
    height: 50px;
    background: red;
    margin-top: 50px;
}
<divclass="wrapper">
    <div class="box"></div>
</div>

子元素box并没有预期的相对父元素向下移动50px
而是没有变化，假设设置成150px，则父子元素均向下移动了150px

原理：父子嵌套元素在垂直方向的margin,父子元素是结合在一起的,他们两个的margin会取其中最大的值.

正常情况下,父级元素应该相对浏览器进行定位,子级相对父级定位.

但由于margin的塌陷,父级相对浏览器定位.而子级没有相对父级定位,子级相对父级,就像坍塌了一样.

解决办法：触发父容器的BFC即可。