MarginCollapse一直是前端开发必须了解的一个概念，面试中一般都会问到这个问题。所以整理一下margin叠加相关的知识点。什么是保证金叠加？保证金叠加何时发生？如何避免重叠边距？什么是MarginOverlay让我们看一下W3C对MarginOverlay的定义：在CSS中，两个或多个框（可能是也可能不是兄弟）的相邻边距可以组合形成一个边距。以这种方式合并的边距被称为折叠边距，由此产生的合并边距称为折叠边距。大致意思是：在CSS中，两个或多个正常流动的盒子（可能是父子元素，或者兄弟元素）在垂直方向上的边距会重叠，这种形成的边距称为边距堆叠。我们可以注意到定义中的几个关键词：adjacency、twoormore、verticalorientation、normalflow。相邻以相邻说明它们的位置关系，不以padding、border、clear和linebox隔开。两个或多个两个或多个框是指元素之间的交互，单个元素不会有边距重叠。垂直水平边距永远不会折叠。只有垂直边距会重叠。水平边距不重叠。普通流量（inflow）什么是普通流量？W3C只定义了流外：如果元素是浮动的、绝对定位的或者是根元素，则称为流外。如果一个元素不是流出的，则它被称为流入流。从定义我们可以知道，只要不是浮动的、绝对定位的、根元素的，就是在流中。什么时候会发生保证金叠加？边距堆叠有两种情况：一种是父子边距堆叠；另一种是兄弟边缘堆叠。W3C也有关于什么是相邻边距的定义：两个边距是相邻的，当且仅当：-都属于参与同一块格式化上下文的流入块级框-没有行框，没有间隙，没有填充和没有边界将它们分开-都属于垂直相邻的盒子边缘，即形成以下对之一：盒子的顶部边缘和它的第一个流入子的顶部边缘盒子的底部边缘和它的下一个流入的顶部边缘如果>父级具有“自动”计算的高度，则最后一个流入子级的同级底部边距及其父级的底部边距没有建立新块格式化上下文且计算的“最小高度”为零的框的顶部和底部边距",zeroor"auto"computed"height",andnoin-flowchildren从定义中，我们可以清楚地知道必须满足哪些条件才能导致margincollapse：它们都属于普通流的block-levelboxes，参与相同的块级格式化上下文没有被padding、border、clear和linebox分隔的都是垂直相邻的盒子边缘：盒子的topmargin和它的第一个normalflow子元素的topmargin盒子的bottommargin和它的下一个normal流的bottommargin流兄弟的上边距框和其父元素的下边距框child的topmargin和bottommargin，不新建块级格式上下文，min-height计算为0，height计算为0或auto，无正常流子元素Demo1.parent1{高度：20px；背景：黄色；margin-bottom:20px;}.parent2{margin:20px030px;}.parent3{height:20px;背景：绿色；margin-top:20px;}.child{背景:红色;高度：20px；边距：40px030px;
