什么是BFC
BFC(Block formatting context)的中文翻译我们一般叫做块级格式化上下文。它是一个独立渲染的区域，规定了内部如何布局，同时不受外界的影响。我们的根元素本身就是一个BFC
BFC的特性
BFC的特性有很多，但是这里主要说到四点，也是我们常用的。
-
BFC内部的margin会发生折叠，即是我们常说的margin collasping。
-
BFC内部的浮动元素也参与高度计算，我们常利用此点解决高度塌陷的问题。
-
BFC的区域不会与float box重叠，我们可以利用这点来做到自适应两栏布局。
-
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
怎么生成一个BFC
-
根元素。因为根元素本身就是一个BFC
-
设置
float属性 -
position为absolute或者fixed -
overflow不为visible,一般而言我们都是设为hidden -
display为inline-block, table-cell, table-caption, flex, inline-flex
BFC的用处或者解释
1. 边距折叠问题
前面我们说过，根元素本身就是一个BFC，所以我们经常提到的边距折叠，即是垂直方向上margin不会相加，而是选择较大的一个值作为margin，就像这个例子
<div style="200px;height: 200px;background-color: red;margin-bottom: 10px;"></div>
<div style="200px;height: 200px;background-color: green;margin-top: 20px;"></div>
看到上面的结果我十分感动啊，实在是没想到markdown真的能直接编译代码，那这样我以后还截个毛图，有代码直接在这里做实验行了。
说回正题，这里我们的上下边距是20px的而不是20+10=30px。这就是因为我们上文提到的BFC内部的正常块级元素（注意是正常）会发生垂直边距折叠。但是有时候我们不需要这种边距折叠，有没有什么办法去掉吗？这就需要用到我们上面提过的另一个特性
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
意思很明确了，所以我们要想避免这种折叠那么我们就可以新建一个BFC，也就是这样
<div style="overflow: hidden">
<div style="200px;height: 200px;background-color: red;margin-bottom: 10px;overflow:hidden"></div>
</div>
<div style="200px;height: 200px;background-color: green;margin-top: 20px;overflow:hidden"></div>
由于外部的盒子设了overflow:hidden，所以这个时候新建了一个BFC，而因为BFC里外是不能互相影响的，所以margin就无法折叠。
2.解决高度塌陷
<style>
.par {
border: 5px solid #fcc;
300px;
}
.child {
border: 5px solid #f66;
100px;
height: 100px;
float: left;
}
</style>
<body>
<div class="par">
<div class="child"></div>
<div class="child"></div>
</div>
</body>
BFC内部的浮动元素也参与高度计算，我们常利用此点解决高度塌陷的问题。
所以这里我们只需要给父元素加一个overflow:hidden使父元素变成BFC便可。
3.两栏自适应布局
<style>
.wrap{
800px;
height:200px;
}
.aside {
300px;
height: 150px;
float: left;
background: #f66;
}
.main {
height: 200px;
background: #fcc;
}
</style>
<div class="wrap">
<div class="aside"></div>
<div class="main"></div>
</div>
对于这段代码出来的效果应该没什么问题，我们把aside浮动了，而main的宽度随着wrap变化，所以此时aside浮在main上面。
BFC的区域不会与float box重叠，我们可以利用这点来做到自适应两栏布局。
我们利用这个特点，把我们的main元素变成BFC，这样它就不会与我们的浮动元素进行重叠，然后我们便实现了一个两栏自适应布局的效果。
<style>
.wrap{
800px;
height:200px;
}
.aside {
300px;
height: 150px;
float: left;
background: #f66;
}
.main {
height: 200px;
background: #fcc;
}
.main{
overflow:hidden;
}
</style>
<div class="wrap">
<div class="aside"></div>
<div class="main"></div>
</div>
当然，对于两栏自适应布局，除了采用BFC之外，我之前还写过一篇文章说过两栏自适应布局，那种方式就做圣杯布局的方法。