CSS基础面试MarginCollapse和MarginMerge及其解决方法在心！margin折叠在父子元素中，margin是单独设置的。比如父元素设置为100px，子元素设置为50px。出乎意料的是，结果出乎我们的意料！水平方向的距离确实没问题，但是垂直方向，很明显子元素的margin-top设置为距顶部50px，所以应该是距顶部50px父元素。这种现象称为保证金崩溃。但是很多人可能不太理解，为什么叫崩溃呢？其实你可以这样理解，如上例，子元素原本距离父元素顶部50px，现在没有了，也就是父元素的天花板对它没有影响子元素，就相当于什么都没有，就相当于折叠起来了。所以它被称为保证金崩溃。一句话总结：父子嵌套的元素垂直边距取最大值。但是有的时候我们并不想出现这样的问题，那么margincollapse这个问题怎么解决呢？答案是，我们可以通过触发BFC来解决！什么是BFC？BFC什么是BFC以及BlockFormattingContext的作用，中文叫做块级格式化上下文。CSS把HTML的每一个元素都看成一个盒子，它进一步认为每个盒子都有一套正常的语法规则或者渲染规则，可以根据这个规则绘制出写好的HTML元素，但是我们可以通过一些特定的手段触发BFC，以至于它所遵守的语法规则与原来的语法规则略有不同。即BFC被触发后，具体的框会遵循另一套语法规则。BFC听起来很棒。它可以改变一个盒子的语法规则，但变化不大。也许不到千分之一。但这正是它解决了margincollapse和marginmerging问题的关键所在。如何触发BFCsummary触发BFC的方式：float属性是left/rightoverflow是hidden/scroll/autoposition是absolute/fixeddisplay是inline-block/table-cell/table-caption触发BFC的方式有很多种，哪种方式比较好？视具体情况而定，个人认为有一个原则：根据需求，哪个触发方式没有效果，就用那个
