8招解决文档流中外边距叠加（溢出）问题（BFC解决方案）

相信很多学习前端的朋友都会遇到这样一个问题，当一个父元素和它的子元素同时写了margin-top或者margin-bottom属性时，好像只有父元素才会生效，而它的子元素却不会生效。很多朋友最开始遇到这个问题可能会不知所措，那么我今天就来给大家讲一下关于这个问题怎么解决。

首先，这个现象叫做：“外边距叠加（外边距溢出）”。那么要满足什么样的条件，才会发生这种现象呢？

三个条件：

1. 父元素没有上边框
2. 子元素的内容区域的上边沿与父元素的内容区域的上边沿重合
3. 父元素与子元素同时使用了margin-top或者margin-bottom

接下来，给大家举个例子，让大家能够明显的看出这种现象。

          
子元素
          父元素

这是以上代码会实现的效果：

此时我们会发现，只有父元素的上外边距才起了作用，而子元素的上外边距似乎并没有起作用，但事实真的就是父元素和子元素同时设置上外边距时，只有父元素才会起作用吗？

并非如此，实际上父元素和子元素的上外边距都生效了的，只不过他们两者的上边距叠加了。

此时我们将子元素box1的margin-top值改为100px，其他代码不变，再来看看他们所实现的效果：

我们会发现父元素离顶部有100像素的距离，这也就验证了：“父元素和子元素同时设置marin-top/margin-bottom时，只有父元素的magin值才会生效” 这句话是错误的。

实际上两者的magin-top值都生效了的，只不过他们的上边距叠加了，因为子元素的margin-top值比父元素的margin-top值大，所以父元素的margin-top会被覆盖掉，只不过页面上的效果看起来像是父元素的margin-top没有生效而已 。

不相信或者不理解的朋友可以去浏览器中按F12打开调试面板，查看两者的盒模型就会发现他们两者的上外边距都算在了盒模型里面。

但是以上这种效果并不是我们所希望的，我们所希望的效果是下面这样的：

当子元素设置了margin-top之后，会将自己往下推，离父元素的上边沿有50像素的距离，这才是我们所希望的效果。

那么接下来咱们进入正题，来具体讲讲这8中解决方案。

实际上可能不止这8种，但由于本人的知识有限，目前只发现有这8种解决方案可以解决，如果有更好的方案请在下方留言区进行留言与反馈，大家共同学习！

关于外边距叠加的解决方案，我们有个高大上的名字，叫做BFC（Block Formatting Context）解决方案，直译为“块级格式化范围”。

方案如下：

1. position:absolute
2. display:inline-block
3. float:left/right
4. overflow:hidden
5. 添加垂直方向上的padding（padding-top/paddint-bottom）
6. 添加border外边框
7. 在子元素与父元素之间添加一个空的table标签
8. 利用父元素的伪类 before（作用相当于第7条，强烈推荐！！！）
   .con::before {
   content:"";
   display:table;
   }

先来讲一下，前6种方案是要将其写在父元素的样式中，这样才会触发BFC。

但是，前6种解决方案咱们并不推荐，因为使用了前6种方案，会对后续代码有影响，代码少可以使用，但是当代码一多，免不了会出现很多问题，出现的问题我就不再一一举例，所以这里我不推荐大家使用前6种方案。

第7种方案呢，勉强推荐，但是本人觉得在html中写一个空的table标签这样并不好，懂得人自然懂。

再来讲第8种，这是本人强烈推荐的方案，这种方案是利用父元素的伪类去解决外边距溢出，与第7种方案异曲同工，而且这对页面样式以及代码结构是没有任何影响的，所以大家可以放心使用这种方法。

当然，外边距溢出问题并不只是会出现父元素与子元素当中；兄弟元素（相邻元素）中也会出现同样的问题。

兄弟元素（相邻元素）外边距叠加问题解决方案：

同解决父子元素的方法一样，但要在所有兄弟（相邻）元素上都添加相应的解决方案
当使用overflow方案时要给两个或多个相邻元素添加一个大盒子包裹，在大盒子上使用overflow

以上就是文档流中外边距叠加问题的解决方案，希望能够对大家有所帮助，当然可能有些地方没讲明白，希望见谅，如果有不懂的地方或者有什么意见或建议，请在下方留言或者联系本人。

谢谢大家的观看！纯手写，写作不易，希望大家多多关注我，本人将不定期为大家更新相关资源与教程（个人博客：www.small0613.com）。