边距堆叠处理方案(BFC)
首先要明白BFC是什么意义，其全英文拼写为 Block Formatting Context 直译为“块级格式化高低文”
两个或多个块级盒子的垂直相邻边境会重合。效果的边境宽度是相邻边境宽度中最大的值。假如涌现负边境，则在最大的正边境中减去相对值最大的负边境。假如没有正边境，则从零中减去相对值最大的负边境。注重：相邻的盒子能够并非是由父子关联或同胞关联的元素生成。
然则边境的堆叠也有例外情况：
1、程度边距永久不会重合。
2、在范例文档中，2个或以上的块级盒模子相邻的垂直margin会堆叠。终究的margin值盘算要领以下：
a、悉数都为正值，取最大者；
b、不全是正值，则都取相对值，然后用正值减去最大值；
c、没有正值，则都取相对值，然后用0减去最大值。
注重：相邻的盒模子能够由DOM元素动态发生并没有相邻或继续关联。
3、相邻的盒模子中，假如个中的一个是浮动的（float），垂直margin不会堆叠，而且浮动的盒模子和它的子元素之间也是如许。
4、设置了overflow属性的元素和它的子元素之间的margin不被堆叠（overflow取值为visible除外）。
5、设置了相对定位（position:absolute）的盒模子，垂直margin不会被堆叠，而且和他们的子元素之间也是一样。
6、设置了display:inline-block的元素，垂直margin不会堆叠，以至和他们的子元素之间也是一样。
7、假如一个盒模子的高低margin相邻，这时刻它的margin能够堆叠掩盖（collapse through）它。在这类情况下，元素的位置（position）取决于它的相邻元素的margin是不是堆叠。
a、假如元素的margin和它的父元素的margin-top堆叠在一同，盒模子border-top的边境定义和它的父元素雷同。
b、别的，恣意元素的父元素不介入margin的堆叠，或许说只要父元素的margin-bottom是介入盘算的。假如元素的border-top非零，那末元素的border-top边境位置和本来一样。
一个运用了消灭操纵的元素的margin-top绝不会和它的块级父元素的margin-bottom堆叠。
注重，那些已被堆叠掩盖的元素的位置对其他已堆叠的元素的位置没有任何影响；只要在对这些元素的子元素定位时，border-top边境位置才是必须的。
8、根元素的垂直margin不会被堆叠。
外边距(margin)堆叠示例
外边距堆叠是指两个垂直相邻的块级元素，当高低两个边距相遇时，起外边距会发生堆叠征象，且堆叠后的外边距，即是个中较大者。
图示：
另一个堆叠征象是当一个元素包含在另一个元素当中时，子元素与父元素之间也会发生堆叠征象，堆叠后的外边距，即是个中最大者：
同理，假如一个无内容的空元素，其本身高低边距也会发生堆叠。
外边距堆叠的意义
外边距的堆叠只发生在普通流文档的高低外边距之间，这个看起来有点新鲜的划定规矩，其实有其现实意义。想象，当我们高低分列一系列划定规矩的块级元素（如段落P）时，那末块元素之间由于外边距堆叠的存在，段落之间就不会发生双倍的间隔。
案例：以下图，父元素没有设置margin-top，而子元素设置了margin-top：20px;能够看出，父元素也一同有了边距。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
.demo{
height:100px;
background: #eee;
}
.parent{
height:200px;
background: #88f;
}
.child{
height:100px;
margin-top:20px;
background: #0ff;
width:200px;
}
</style>
</head>
<body>
<section>
<h2>此部份是能更轻易看出让下面的块的margin-top。</h2>
</section>
<section>
<article>
<h2>子元素</h2>
margin-top:20px;
</article>
<h2>父元素</h2>
没有设置margin-top
</section>
</body>
</html>
处理这个方法：父元素设置padding-top:20px 或许设置 overflow:hidden，子元素作废margin-top:20px;
防备外边距堆叠处理方案：
虽然外边距的堆叠有其肯定的意义，但有时刻我们在设想上却不想让元素之间发生堆叠，那末能够有以下几个发起可供参考：
1、外层元素padding替代
2、内层元素通明边框 border:1px solid transparent;
3、内层元素相对定位 postion:absolute:
4、外层元素 overflow:hidden;
5、内层元素 加float:left;或display:inline-block;
6、内层元素padding:1px;
以上发起可根据实际情况来采用。
【相干引荐：CSS视频教程】
以上就是CSS中margin堆叠及防备的要领引见（代码示例）的细致内容，更多请关注ki4网别的相干文章！
