如何创建一个BFC和BFC的使用场合

BFC(Block formatting Context) 块级格式化上下文，布局规则如下：

1.内部的盒子会在垂直方向，一个一个地放置；
2.盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的上下margin会发生重叠；
3.每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此；
4.BFC的区域不会与float重叠；
5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也是如此；
6.计算BFC的高度时，浮动元素也参与计算。

怎样会触发BFC？
1.根元素；
2.float的属性部位none；
3.position为absolute或fixed；
4.display为inline-block，table-cell，table-caption，flex；
5.overflow不为visible

<h1>第一组</h1>
<div class="aside"></div>
<div class="main"></div>

.aside{
  width:100px;
  height:150px;
  background:black;
  float:left;
}
.main{
  width:300px;
  height:200px;
  background:yellow;
}

符合布局规则的第三条：每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此。

如果要黑色部分把黄色部分撑到一边，则按照第四条，需要创造BFC，则在黄色部分加入overflow:hidden;来触发。

  width:100px;
  height:150px;
  background:black;
  float:left;
}
.main{
  width:300px;
  height:200px;
  background:yellow;
  overflow: hidden;   /*BFC的区域不会与float重叠。 overflow:hidden;触发BFC*/
}

第二组 清除浮动

<h1>第二组 清除浮动</h1>
  <div class="parent">
  <div class="child"></div>
</div>

.parent{
  width:300px;
  border:1px solid black;
} 
.child{
  width:100px;
  height:150px;
  background:yellow;
  float:left;
}

我们看到黄色部分没有撑开父元素，那么按照第六条：计算BFC的高度时，浮动元素也参与计算。

应该让父元素触发BFC，则加上overflow:hidden;

第三组 margin重叠

根据第二条：盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的上下margin会发生重叠；代码如下：

<h1>第三组 margin重叠</h1>
<div class="box"></div>
<div class="box"></div>

.box{
  width:300px;
  height:100px;
  background:yellow;
  margin:50px 0;
}

同一个BFC下，上下的margin重叠了，那么怎么能不重叠呢，就是不在同一个BFC下呗，给第二个box加一个父级，再让父级触发BFC就可以了。

<h1>第三组 margin重叠</h1>
<div class="box"></div>
<div class="wrap">    <!-- 加一个父级，使两个.wrap不在同一个BFC下-->
  <div class="box"></div>
</div>

.box{
  width:300px;
  height:100px;
  background:yellow;
  margin:50px 0;
}
.wrap{
  overflow: hidden;
}

这样上下margin不重叠了