浅谈BFC与应用

什么是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的这一特性

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之外，我之前还写过一篇文章说过两栏自适应布局，那种方式就做圣杯布局的方法。