1.margin塌陷问题
margin塌陷指的是嵌套父子块级元素垂直方向（次方向）的margin会结合到一起，并取最大的值，子元素的margin会往父元素顶部上方方向塌陷。（今天讲的问题都是块级元素之间的问题）
如图给父元素加了一层“顶框”后，确实阻止了“塌陷的问题”，但是由于改变了布局的尺寸，所以这种方法我们坚决不用。
解决方法
这里要讲到一个重要的概念BFC
首先来简要看一下bfc是什么？block formatting context即块级格式化上下文。它决定了块级元素如何对它的内容进行布局，以及与其他元素的关系和相互关系。它会让盒模型的渲染规则发生改变，并且创建一个新的环境并与外界相隔。
BFC能解决该问题的关键就在于此，他能在改变一个块级元素内的渲染规则与外界相隔，这样其内部的子块级元素不会受到外部的影响，就如同在父级元素顶部加了一个“框”，这样子元素就能按照父元素的顶部设置margin值。
触发BFC的条件
- body根标签
- display的值为table-cell、inline-block
- position的值为absolute或者fixed
- overflow的值不为visible
- float的值不为none
（一开始不大好理解但是可以先记下来，今天只是初探，后续会有专篇讲解）
这些都能解决但是要按照实际情况来使用以免引发新的问题。
2.margin合并问题
知道了BFC知识后我们来讲解一下margin合并的问题，margin合并指的是兄弟块级元素间垂直方向的margin值会合并在一起并取最大值，与margin塌陷类似，但是是发生在兄弟元素间。（其实是BFC的规则，今天在这里不多讲）
如图，box1设置margin-bottom100px，box2设置margin-top100px，实际距离为100px，参考BFC规则的运用，我们也可以通过触发BFC的方式来解决。
如图，通过给任意一个元素加一个父级元素并触发BFC就可以将其子元素不受到外界影响，如同加了一个“顶”。
但是由于涉及到了html结构的改变，而且并不会像塌陷问题一样影响布局效果，所以一般选择不解决，通过设置需要的距离即可，即如上例子需要200px的距离，就可以直接设置任一元素的margin-top或者bottom值为200px就行了，这点需要注意，毕竟加了HTML结构可能会造成动一发而牵全身的影响。
欢迎大家交流分享！