有如下的HTML

<body>
    <div class="page">
        <div class="mains">
            <div class="content"></div>
        </div>
     </div>
</body>

以及如下的css

html,body{  padding: 0px;  margin: 0px; width: 100%;  height: 100%;  }
html{  background: aliceblue;  }
body{  background:antiquewhite;  }
.page {  width: 600px; height: 300px;  background: mediumaquamarine;}
.mains { width: 300px; height: 200px;background: yellow;}
.content{ width: 200px; height: 100px;background:mistyrose;}

在常规流中显示的效果如下（图1）

wKioL1ZK58PhY4dsAAAcXwnfJIs649.jpg

此时，为.content添加以下样式

.content{width: 200px; height: 100px;background:mistyrose; margin-top: 10px; }

显示效果（图2）

wKiom1ZK5jqDKE4oAAAbAPBzbrU071.jpg

这里可能会出乎很多人的意料，按我们正常的理解，.content外部有.mains的包围，那.content应该是顶部距离.mains 10px才是，可实际情况他们并没有分开，甚至最终的结果感觉是body顶部距离html顶部10px（至于这感觉对不对呢？也许不完全如此）.这就是“外边距折叠”

接下来我们再给.mains加上margin-top样式

.mains {width: 300px;height: 200px;background: yellow;margin-top: 10px;}

其显示效果与“图2”一样，那么我们修改.mians的margin-top的值

.mains {width: 300px;height: 200px;background: yellow;margin-top: 20px;}

显示效果如下（图3）

wKiom1ZK6OjiTfw0AAAcm3_BsQI570.jpg

此时的效果并不是相距30px，而是取了两则中最大的值20px.

接着给.page加上“margin-top: 20px；”效果不变，给body加上也是一样的效果。但如果给html加上该样式

html{
    background: aliceblue;
    margin-top: 20px;
   }

显示效果（图4）

wKioL1ZK6yqwQeTgAAAdnxnfHjE918.jpg

从以上结果可得知，在常规流中，html里面的元素（包括body）的外边距都是针对html元素的边缘来确定的。而html元素的外边距是针对浏览器顶部决定的。从其得知，html元素其实生成了BFC.


那么问题来了，如果这样，那设置的html的背景色真的是html元素的吗？（因为设置html的margin-top: 20px;后背景色用的仍是对html元素设置的样式值）会不会其实是浏览器的背景色？ 


对于“图2”和“图3”，其实我们绝大多数情况要的不是这样的效果，要的其实是针对父元素的margin-top.  对于这种上下级元素而言，他们的margin是针对最近的BFC块来定位的，所以，我们只要能让其父元素生产BFC就可以实现我们想要的效果。例如我对.mains添加以下的样式：

overflow: hidden;

那么我们想要的效果也就出来了，如下所示：

wKioL1ZK7wXyA3nRAAAZXnTtfSw433.jpg

如果我们不在.mains上添加，而是在.page上添加，那结果将会如下所示

wKioL1ZK7pCCsB8lAAAYBtIkK8Y407.jpg

将.mains和.page同时加上overflow: hidden; 其结果如下：

wKiom1ZK727xZq_aAAAWEZBOzU8085.jpg

这不就是我们想要达到的效果吗~~


以上是针对“父子关系”的元素外边距折叠以及解决的办法，至于兄弟元素的折叠问题就相对简单多了。当然解决的办法也是一样。


推荐该链接供大家学习：

http://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html


根据w3c规范，两个margin是邻接的必须满足以下条件：

  • 必须是处于常规文档流（非float和绝对定位）的块级盒子,并且处于同一个BFC当中。

  • 没有线盒，没有空隙（clearance，下面会讲到），没有padding和border将他们分隔开

  • 都属于垂直方向上相邻的外边距，可以是下面任意一种情况

    • 元素的margin-top与其第一个常规文档流的子元素的margin-top

    • 元素的margin-bottom与其下一个常规文档流的兄弟元素的margin-top

    • height为auto的元素的margin-bottom与其最后一个常规文档流的子元素的margin-bottom

    • 高度为0并且最小高度也为0，不包含常规文档流的子元素，并且自身没有建立新的BFC的元素的margin-top和margin-bottom


以上的条件意味着下列的规则：

  • 创建了新的BFC的元素（例如浮动元素或者'overflow'值为'visible'以外的元素）与它的子元素的外边距不会折叠

  • 浮动元素不与任何元素的外边距产生折叠（包括其父元素和子元素）

  • 绝对定位元素不与任何元素的外边距产生折叠

  • inline-block元素不与任何元素的外边距产生折叠

  • 一个常规文档流元素的margin-bottom与它下一个常规文档流的兄弟元素的margin-top会产生折叠，除非它们之间存在间隙（clearance）。

  • 一个常规文档流元素的margin-top 与其第一个常规文档流的子元素的margin-top产生折叠，条件为父元素不包含 padding 和 border ，子元素不包含 clearance。

  • 一个 'height' 为 'auto' 并且 'min-height' 为 '0'的常规文档流元素的 margin-bottom 会与其最后一个常规文档流子元素的 margin-bottom 折叠，条件为父元素不包含 padding 和 border ，子元素的 margin-bottom 不与包含 clearance 的 margin-top 折叠。

  • 一个不包含border-top、border-bottom、padding-top、padding-bottom的常规文档流元素，并且其 'height' 为 0 或 'auto'， 'min-height' 为 '0'，其里面也不包含行盒(line box)，其自身的 margin-top 和 margin-bottom 会折叠。