CSS中margin重叠及防止的办法介绍（代码示例）
边距重叠解决方案(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重叠及防止的办法介绍（代码示例）的具体内容，更多请关注百分百源码网其它相关文章！
