margin重叠的原因及解决办法

一.原因及创建

1.margin重叠是因为同一个bfc（块级格式化上下文）中的margin会重叠，bfc是单独的一个容器。

2.创建bfc的方法：

1. float的值不为none
2. position的值为absolute，fixed
3. display（inline-block，table-cell，table-caption，flex，inline-flex）
4. overflow的值不为visible

二.代码分析

    
111



    
222



    
333



    
444



    
555



    
666



    
777

三.结论：防止margin重叠有两个方法

1.       不毗邻（用border分开）

2.       创建bfc

转载于:https://my.oschina.net/wyc1219/blog/876359