Margin collapse (parent-child element collapse)

Description The first figure is a collapsed diagram, and the second diagram is the resolved one.

1, parent element maigin-top and child element margin-top collapse: set border or padding or create BFC

2, Big brothers margin-Bottom and two brothers margin-top collapse: Create BFC

                                                     

3. Child element float-> Parent element height collapse: pseudo-class clear floating or create BFC

4, Big Brothers float-> two brothers surround: pseudo class clear floating or create BFC

Attached: How to create BFC:

• Float:left/right
• Position:absolute/fixed
• Display:inline-block/table-cell/table-caption
• Overflow:hidden/auto/scroll

Bfc:http://www.cnblogs.com/uncle-keith/p/6158136.html

Margin collapse (parent-child element collapse)