Margins overlapping / BFC- front-end daily summary

What is the overlapping margins

Two adjacent (parent-child or sibling relationship) of the block-level elements margins are set, then the browser will fetch the two adjacent block element from the maximum outer margin (if two margins are equal, which would take a) set value.

Below: At this console styles bar on the browser, margin-top .con2 style
and con1 style margin-botton though are set 10px, but the browser render out the effect is 10px, rather than 20px. This is the effect of overlapping margins

How to prevent overlapping margins it?

创建新的BFC可以防止

BFC What is it?

English full name: Block Formatting Context Chinese understand: block-level formatting context

Meet at one of the conditions, the formation of BFC.

1. Float: float value except the node.
2. Positioning elements: position (absolute, fixed)
3. display:inline-block,table-cell,table-caption之一
4. overflow: visible, except for the value (hidden, scroll)

The overlapping margins following solution

Create a different BFC