CSS margin合并问题

margin折叠的产生有几个条件：

• 这些margin都处于普通流中，并在同一个BFC中；
• 这些margin没有被非空内容、padding、border 或 clear 分隔开；
• 这些margin在垂直方向上是毗邻的，包括以下几种情况：
  1、一个box的top margin与第一个子box的top margin
  2、一个box的bottom margin与最后一个子box的bottom margin，但须在该box的height 为auto的情况下
  3、一个box的bottom margin与紧接着的下一个box的top margin
  4、一个box的top margin与其自身的bottom margin，但须满足没创建BFC、零min-height、零或者“auto”的height、没有普通流的子box

垂直方向上毗邻的box不会发生折叠的情况：

• 根元素的外边距不会参与折叠
• 一个有clearance的box的上下margin毗邻，它会与紧接着的下一个box发生margin折叠，但折叠后的margin不会再与它们父box的bottom margin折叠

折叠边距的计算

当两个margin都是正值的时候，取两者的最大值；当 margin 都是负值的时候，取的是其中绝对值较大的，然后，从 0 位置，负向位移；当有正有负的时候，先取出负 margin 中绝对值中最大的，然后，和正 margin 值中最大的 margin 相加。但必须注意，所有毗邻的margin要一起参与运算，不能分步进行。

BFC有三个特性

• BFC会阻止垂直外边距（margin-top、margin-bottom）折叠
  

  按照BFC的定义，只有同属于一个BFC时，两个元素才有可能发生垂直Margin的重叠，这个包括相邻元素，嵌套元素，只要他们之间没有阻挡(例如边框，非空内容，padding等)就会发生margin重叠。

  因此要解决margin重叠问题，只要让它们不在同一个BFC就行了，但是对于两个相邻元素来说，意义不大，没有必要给它们加个外壳，但是对于嵌套元素来说就很有必要了，只要把父元素设为BFC就可以了。这样子元素的margin就不会和父元素的margin发生重叠了。

• BFC不会重叠浮动元素
• BFC可以包含浮动

我们可以对父容器添加这些属性来形成BFC达到“清浮动”效果

• float为 left|right
• overflow为 hidden|auto|scroll
• display为 table-cell|table-caption|inline-block
• position为 absolute|fixed