快速解决margin折叠问题

[beidan]

1. 什么情况才会出现：2个或多个毗邻的的普通流中的块元素垂直方向上的 margin 会折叠

   • 毗邻 ： 是指没有被非空内容、padding、border 或 clear 分隔开
   • 垂直方向： 是指只有垂直方向的 margin 才会

2. 如何解决margin叠加问题？

   • 浮动元素、inline-block 元素、绝对定位元素的 margin 不会和垂直方向上其他元素的 margin 折叠
   • 创建了BFC的元素和它的子元素不会发生折叠
   • 触发BFC的因素是float（除了none）、overflow（除了visible）、display（table-cell/table-caption/inline-block）、position（除了static/relative）

3. 日常开发出现情况 有些时候会出现上面一些感觉比较诡异的事情，子元素明明设置了margin值，但是却没有撑开父元素，此时只要给父元素设置overflow:hidden；或者触发BFC即可。

看图更容易理解：

1. 上下元素margin值重叠

2. 父子元素margin值重叠