CSS -margin series of BUG

1. collapse phenomenon (sub-element set margin-top, the parent element will collapse) 

The following examples, in fact, this time the child element is the parent element and the distance 0, from the sibling node of the parent element is 100px

 　　

　　Trigger parent element bfc, overflow: hidden, border:

Solution 1: parent element disposed transparent border:  1px Solid  transparent; Box-Sizing: border-Box; 

Solution 2: parent element disposed overflow: hidden ;

Solution 3: parent element provided  the display: inline-Block ; width: 100%;

 

2. margin merger

a: two brothers element is an element of the upper margin-bottom margin-top value of the next element is the maximum value of both

 

The following examples one and two of the distance actually 200px, not 300px;

 　　

　　Reason: a bfc adjacent two of the same box can overlap margin;

　　Solve: TWO wrapped with a div, and trigger a div bfc (overflow: hidden), 

 

b: two elements is the relationship between father and son, father and son element has a margin-top, take the maximum

 

Examples: Final margin-top is 20px;

 

 Solution: collapse and the same