margin 重叠

margin 重叠

我是之前写代码的时候，没有注意这个问题。

但是，前几天看一下代码，竟然相邻的两个块级

一个上面的块级部分写了 margin-bottom:10px

一个下面的块级部分写了 margin-top:10px

这两个会重叠，不会同时失效

所以嘛我们想要弄的话 就是涉及到 BFC

---

BFC: Block Formatting Context 【块级格式化上下文】

一个HTML元素要创建BFC，则满足下列的任意一个或多个条件即可：

1. float的值不是none。（float:left 或者float:right）
2. position的值不是static或者relative。（position:absolute或者position:fixed）
3. display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4. overflow的值不是visible（overflow:hidden、overflow:scroll）

---

当发生重叠的时候：

1、当两个margin都是正值的时候，取两者的最大值；

2、当 margin 都是负值的时候，取的是其中绝对值较大的，然后，从 0 位置，负向位移；

3、当有正有负的时候，先取出负 margin 中绝对值中最大的，然后，和正 margin 值中最大的 margin 相加。