CSS：外边距塌陷和BFC（要想生活过得去头上就得带点绿？）

外边距塌陷

我们在学习css过程中会学到margin属性。margin指外边距，即围绕在元素边框的空白区域。那么什么是外边距塌陷呢？
外边距塌陷也叫做外边距合并，它是指两个在正常流中相邻的具有兄弟或者父子关系的块级元素的外边距组合起来变成了单个外边距。但是只有上下外边距才会有塌陷，左右外边距不会出现这个问题。

那么我们还是先来看看例子：
我们想要小绿块在父元素的右下角
先看看代码：

	<div class="dad"><div class="son"></div></div>

	  .dad {
        width: 100px;
        height: 100px;
        margin-left: 100px;
        margin-top: 100px;
        background: red;
      }
      .son {
        width: 50px;
        height: 50px;
        margin-left: 50px;
        margin-top: 50px;
        background: green;

      }

这种情况，我们的子元素因为设置了margin属性，应该会被绘制在右下角。
但是发现实际上如图：

我们发现小绿块并没有在右下角而是待在了右上角，当然这个不能说是因为是绿色所以它就被绘制在了父元素的上部，那么这是为什么呢？这个就要用margin塌陷来解释了。但是接下来我们应该怎么做呢？

首先我们可以了解一下BFC，什么是BFC呢？
BFC指的是（Block Formatting Context）块级格式上下文，首先它并不是一个CSS属性，也不是一段代码，而是CSS2.1中引申出的一个概念，它决定元素内容应该如何渲染以及和其他元素的关系与交互。BFC有5条规则：

• BFC有隔离作用，内外元素互不影响；
• 一个元素只能存在于一个BFC中，有唯一性；
• BFC中的元素按正常流排列，元素之间的间隙由外边距（margin）控制；
• BFC中的内容不会与外面的浮动元素重叠；
• 计算BFC的高度，需要计算BFC内部子元素的高度。

那么怎么才能应用BFC呢？在元素css属性中写入以下四条属性中任意一条就能将其转化为BFC。

1. position：absolute；
2. display：inline-block；
3. float：left/right;
4. overflow：hidden；
   当我们给父元素css属性设置display:inline-block;之后我们发现
   
   那抹绿色下去了。使用BFC虽然可以解决问题，但是我们发现新设置的css属性很有可能会影响原来元素的功能，比如父元素本来不应该浮动，虽然你设置浮动之后解决margin塌陷但是使得元素本来的正常功能受到影响，那么我们应该结合实际，使用不会影响实际功能的属性来启用BFC。

我们应该找到最合适的办法让这抹绿色下去。