margin overlap

margin overlap

When I wrote the code before, I didn't pay attention to this problem.

However, looking at the code a few days ago, there are two adjacent block levels

One of the above block-level parts wrote margin-bottom:10px

One of the following block-level parts is written margin-top:10px

These two will overlap and will not fail at the same time

So what we want to do is involve BFC

---

BFC : Block Formatting Context [Block Formatting Context]

To create a BFC for an HTML element, it only needs to meet any one or more of the following conditions:

1. The value of float is not none. (Float:left or float:right)
2. The value of position is not static or relative. (Position:absolute or position:fixed)
3. The value of display is inline-block, table-cell, flex, table-caption or inline-flex
4. overflow的值不是visible（overflow:hidden、overflow:scroll）

---

When overlap occurs:

1. When both margins are positive, take the maximum of the two;

2. When the margins are all negative values, take the one with the larger absolute value, and then shift from the 0 position in the negative direction;

3. When there are positive and negative values, first take out the largest absolute value in the negative margin, and then add it to the largest margin in the positive margin value.