在CSS中，两个相邻框（可能是兄弟或祖先）的margin可以合并为一个margin。这种组合边距的方式称为折叠，因此组合边距称为折叠边距。1.折叠结果当相邻的两个边距为正时，折叠结果为它们之间的较大值。当相邻两个边距均为负值时，折叠结果为两个绝对值中较大的值。当两个边距分别为正负时，折叠结果为两者之和。2.Conditions产生折叠的必要条件：margin必须是连续的，根据w3c规范，连续的两个margin必须满足以下条件：必须是常规文档流中的块级框（非浮动和绝对定位）),和在同一个BFC中。没有linebox，没有gap（clearance，下面会讲到），没有padding和border来分隔它们，都属于垂直方向上相邻的margin，可以是以下任何一种情况。第一个常规文档流子元素的margin-top元素及其下一个常规文档流兄弟元素的margin-top及其第一个margin-bottom其最后一个常规文档流子元素的margin-topheightautomargin-bottom高度为0最小高度也为0，不包含常规文档流的子元素，不创建新的BFC元素的margin-top和margin-bottom2.1创建新元素的条件解释BFC（例如浮动元素或具有“可见”以外的“溢出”值的元素）不会与其子边距一起折叠浮动元素不会与任何元素的边距一起折叠（包括其父元素和子元素）绝对定位元素不会collapsewithany元素的边距折叠常规文档流元素的边距底部及其下一个常规文档流兄弟元素的边距顶部，除非它们之间。有间隙。常规文档流元素的顶部边距与其第一个常规文档流子元素的顶部边距折叠，前提是父元素不包含填充和边框且子元素不包含间隙。如果父元素不包含padding和border，并且子元素的margin-bottom不与margin-top包含间隙折叠。不包含border-top、border-bottom、padding-top、padding-bottom，且其'height'为0或'auto'、'min-height:0'且不包含的常规文档流元素lines一个线框，它自己的margin-top和margin-bottom是折叠的。注意：浮动元素和绝对定位元素不会与其他框产生margincollapse，因为元素会脱离当前文档流，违反了上述两个marginareadjacent条件。同时，因为浮动和绝对定位会让元素为其内容创建一个新的BFC，所以元素和子元素的BFC是不同的，所以不会出现margincollapse。但是，浮动元素与当前BFC的分离并不影响其后面的兄弟元素。后面的兄弟元素和浮动元素前面的元素仍然在同一个BFC中，所以它们之间的边距仍然会被折叠。2.2Clearance当浮动元素后面的元素设置为clear关闭相关方向的浮动时，根据w3c规范，关闭的浮动元素在其margin-top上方会有一定的间隙（clearance），这样可以防止来自margin-toptop的元素折叠并作为元素的margin-top上方的间距存在。这个间距的计算有点复杂，但是在实际工作中是不需要计算的。3.如何使用BFC解决边距合并问题可以参考这篇文章：重要的BFC3.1在CSS中添加padding或者border-top/border-bottom3.2中间相邻元素的情况相邻元素添加一个1px间隔元素（不推荐，因为添加了多余的标签）相邻元素加上display:inline-block;或者grid和inline-grid之后相邻元素之间的垂直边距不会合并，但是要注意grid的浏览器兼容性不是很好。相邻元素可以在其中一个元素外面包裹一层div，并设置任何可以触发BFC的属性。CodepenDEMO文档流外的浮动和绝对定位元素不合并边距3.3父子元素的情况下，给父元素加上padding-top值。缺点：添加一点填充错误给父元素添加边框值，如border-top:1pxsolidtransparent;，缺点同上为父元素或子元素声明浮动float，缺点：float是有时是不必要的。使父元素或子元素声明为绝对定位：position:absolute/fixed;添加属性overflow:auto/auto/scroll到父元素；子元素的外边距使用父元素的内边距代替。不一致的地方，下面这篇文章是学习过程的总结，如果发现错误请留言指出~参考：CSSmarginmerging的问题深入理解css中的margin属性深入理解BFC和保证金崩溃PS：欢迎大家关注我的公众号【前端下午茶】，一起加油~另外可以加入“前端下午茶交流群”微信群，长按识别下方二维码加我为好友，加群备注，我拉你进群~
