flex--解决margin传递、叠加问题

当使用margin时，会出现两个问题：
问题1、父子间的margin，会由子级传递到父级
问题2、兄弟间margin，会上下叠加

做一个简单的实验:

Html	Css
效果

普通解决方法：

问题1、父子间的margin，会由子级传递到父级

解决方法: margin传递的产生的原因是父级的高度没有被自动撑开，所以在父级父级增加属性：  overflow: auto 即可解决

问题2、兄弟间margin，会上下叠加

解决方法：浏览器为了保证列表的整齐，上下margin产生了叠加，不能直接解决。只能通过减少一个margin的方式。如只定义margin-top:100px;  margin-bottom:0px。的方式解决。

不是很完美。

经过实验，发现flex弹性魔盒可以完美解决问题。代码如下：

Html	Css
效果