MarginoverlapBoundaryoverlap是指两个或多个框的相邻边界（可能相邻或嵌套）重叠在一起，没有任何非空内容，填充和边框。形成一个单一的边界。两个或多个块级框的垂直相邻边框重合，它们的边框宽度是相邻边框宽度中最大的。请注意，水平边框不重叠。marginoverlapexample父子元素边框重叠以为是预期的效果：但实际效果如下。这里父元素的高度不是110px，而是100px，这里就发生了高度塌陷。原因是如果没有border，padding，inlinecontent，块元素的margin-top和它的第一个子元素的margin-top，或者块元素的margin-bottom和margin-top之间的间隙它的最后一个子元素的margin-bottom之间没有border、padding、inlinecontent、height、min-height、max-height分隔，那么外边距就会塌陷。子元素的额外边距被父元素的边距剪掉。兄弟元素的边框重叠1
2
3
可以看到1和1之间的距离2、2和3不是50px，恰好边距重叠被取为它们之间最大30px。边框重叠空元素假设您有一个空元素，它有边距，但没有边框或填充。在这种情况下，顶部和底部边距相遇并合并：BFC原理解决上述问题的方法之一是创建BFC。BFC的全称是BlockFormattingContext，即块级格式化上下文。BFC具有以下特点：同一个BFC中的元素相互影响，可能会发生margincollapse；BFC在页面上是一个独立的容器，容器里面的子元素不会影响外面的元素，反之亦然；计算在考虑BFC的高度时，BFC包含的所有元素，包括浮动元素，也参与计算；浮动框的区域不会叠加在BFC上；创建BFC的方法如下：floating（float的值不是none）；absolute定位元素（position的值为absolute或fixed）；inlineblock（显示为inline-block）表格单元（显示为table、table-cell、table-caption等HTML表格相关属性）；弹性盒子（显示为flex或inline-flex）；溢出是不可见的；BFC的使用场景防止verticalmargin重叠：父子元素的边框重叠解决方法：在父元素中添加overflow:hidden；使它成为BFC。.parent{背景：#E7A1C5;overflow:hidden;}兄弟元素的边界重叠，在第二个子元素中创建BFC上下文：1
2
