盒模型再回顾：外边距折叠原理与BFC的关系

外边距折叠：

        指的是毗邻的两个或多个外边距（margin)在垂直方向会合并成一个外边距

(1)什么是BFC呢？

1.BFC：块级格式化上下文（Block Formatting Content）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。

2.在BFC中，盒子从顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin 值所决定的。在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。

3.在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）。

4.简而言之，可以把BFC理解成一个箱子，箱子内部的元素如何摆放都不会影响外部。

1、折叠的结果

①毗邻兄弟元素

参加折叠的margin都是正值：取其中 margin 较大的值为最终 margin 值。
参与折叠的 margin 都是负值：取的是其中绝对值较大的，然后，从 0 位置，负向位移。
参与折叠的 margin 中有正值，有负值：先取出负 margin 中绝对值中最大的，然后，和正 margin 值中最大的 margin 相加

②、父元素与子元素之间：

如果块元素的 margin-top 与它的第一个子元素的margin-top 之间没有 border、padding、inline content、 clearance 来分隔，或者块元素的 margin-bottom 与它的最后一个子元素的margin-bottom 之间没有 border、padding、inline content、height、min-height、 max-height 分隔，那么外边距会塌陷。子元素多余的外边距会被父元素的外边距截断。，这时，子元素的外边距并不作用于父元素，而是作用于父元素之外的对象。

2、折叠的产生情况

BFC的外边距折叠（准确来说是垂直外边距折叠）

　　两个相邻的两个盒子（可能是兄弟关系也可能是父子关系）的垂直外边距会合并成一个单独的外边距。（取较大或相同的那个margin值）

必须是处于常规文档流（非float和绝对定位）的块级盒子,并且处于同一个BFC当中。
没有线盒，没有空隙，没有padding和border将他们分隔开(ps :所以解决办法中有padding或者border两种办法)
都属于垂直方向上相邻的外边距，可以是下面任意一种情况
元素的margin-top与其第一个常规文档流的子元素的margin-top
元素的margin-bottom与其下一个常规文档流的兄弟元素的margin-top
height为auto的元素的margin-bottom与其最后一个常规文档流的子元素的margin-bottom
高度为0并且最小高度也为0，不包含常规文档流的子元素，并且自身没有建立新的BFC的元素的margin-top和margin-bottom

总结BFC的作用：

1：给父级元素清除浮动，避免高度塌陷；

2：垂直margin合并。

3：在两栏布局中，可以用BFC避免浮动兄弟元素的遮盖。

3、解决方法

在父层div加上：overflow:hidden；
把margin-top外边距改成padding-top内边距;
父元素产生边距重叠的边有不为 0 的 padding 或宽度不为 0 且 style 不为 none 的 border，父层div加：padding-top: 1px,或者 border-top:1px ;
设置父元素或子元素浮动（left/right）
设置父元素dispaly:inline-block或者display:table-cell;
给父元素加上绝对定位
也就是让它不在满足外边距坍塌所需条件或者处罚BFC来解决外边距坍塌问题

4、为什么会产生边距折叠设计呢？

CSS的基本模型是排版。只是前端工程师现在做得更多的是 布局 而非 文字排版，但CSS并未界定这两者的区别。而 margin 折叠是为实现文本排版的段落间距而提供的特性。所以很多时候 margin 折叠的特性会带给我们诸多疑惑。

原文链接：https://blog.csdn.net/riddle1981/article/details/52129293