什么是外边距重叠，重叠的结果是什么
小课堂【成都第142期】 分享人：张珺琢
1.背景介绍
外边距重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界重合在一起而形成一个单一边界,外边距的重叠只产生在普通流的垂直相邻边界间。
如果都是正边界，边界宽度是相邻边界宽度中最大的值。如果出现负边界，则在最大的正边界中减去绝对值最大的负边界。如果没有正边界，则从零中减去绝对值最大的负边界。
2.知识剖析
当一个元素出现在另一个元素上面时，第一个元素的底边界与第二个元素的顶边界发生叠加
一般情况：
3.常见问题
外边距重叠的意义？
外边距的重叠只产生在普通流文档的上下外边距之间，这个看起来有点奇怪的规则，其实有其现实意义。当我们上下排列一系列规则的块级元素（如段落P）时，那么块元素之间因为外边距重叠的存在，段落之间就不会产生双倍的距离。
解决外边距重叠？
4.解决方案
外层元素padding代替
内层元素透明边框 border:1px solid transparent;
内层元素绝对定位 postion:absolute:
外层元素 overflow:hidden;
内层元素 加float:left;或display:inline-block;
内层元素padding:1px;
5.编码实战
对黄色盒子设置overflow：hidden；或者对橙色盒子设置绝对定位。或设置浮动，等等。很多种方法。
6.拓展思考
利用BFC是否能避免垂直方向margin重叠？
BFC的两条属性：
1内部的Box会在垂直方向，一个接一个地放置。
2Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
由此：
当垂直的两个box属于不同BFC时，可以避免重叠。
感谢收看。
http://www.jnshu.com/login/1/31050617
------------------------------------------------------------------------------------------------------------------------
技能树.IT修真院
“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。
这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧 ！
