浅谈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="width:200px;height: 200px;background-color: red;margin-bottom: 10px;"></div>

<div style="width:200px;height: 200px;background-color: green;margin-top: 20px;"></div>

看到上面的结果我十分感动啊，实在是没想到markdown真的能直接编译代码，那这样我以后还截个毛图，有代码直接在这里做实验行了。

说回正题，这里我们的上下边距是20px的而不是20+10=30px。这就是因为我们上文提到的BFC内部的正常块级元素（注意是正常）会发生垂直边距折叠。但是有时候我们不需要这种边距折叠，有没有什么办法去掉吗？这就需要用到我们上面提过的另一个特性

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

意思很明确了，所以我们要想避免这种折叠那么我们就可以新建一个BFC，也就是这样

<div style="overflow: hidden">

<div style="width:200px;height: 200px;background-color: red;margin-bottom: 10px;overflow:hidden"></div>

</div>

<div style="width:200px;height: 200px;background-color: green;margin-top: 20px;overflow:hidden"></div>

由于外部的盒子设了overflow:hidden，所以这个时候新建了一个BFC，而因为BFC里外是不能互相影响的，所以margin就无法折叠。

2.解决高度塌陷

<style>

.par {

    border: 5px solid #fcc;

    width: 300px;

}

.child {

    border: 5px solid #f66;

    width:100px;

    height: 100px;

    float: left;

}

</style>

<body>

<div class="par">

    <div class="child"></div>

    <div class="child"></div>

</div>

</body>

.par {
border: 5px solid #fcc;
width: 300px;

}

.child {
border: 5px solid #f66;
width:100px;
height: 100px;
float: left;
}

从效果中我们可以看出，父盒子此时并没有高度，因为正常情况下就算高度是不会把浮动元素也算进去的，但是很多时候我们为了达到高度自适应，不能手动给父元素定高而是应该让子元素撑起来，所以面对这种情况我们就可以用到BFC的这一特性

BFC内部的浮动元素也参与高度计算，我们常利用此点解决高度塌陷的问题。

所以这里我们只需要给父元素加一个overflow:hidden使父元素变成BFC便可。

3.两栏自适应布局

<style>

	.wrap{

		width: 800px;

		height:200px;

	}

    .aside {

        width: 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>

.wrap{
width: 800px;
height:200px;

}

.aside {
width: 300px;
height: 150px;
float: left;
background: #f66;

}

.main {
height: 200px;
background: #fcc;

}

对于这段代码出来的效果应该没什么问题，我们把aside浮动了，而main的宽度随着wrap变化，所以此时aside浮在main上面。

BFC的区域不会与float box重叠，我们可以利用这点来做到自适应两栏布局。

我们利用这个特点，把我们的main元素变成BFC，这样它就不会与我们的浮动元素进行重叠，然后我们便实现了一个两栏自适应布局的效果。

<style>

    .wrap{

        width: 800px;

        height:200px;

    }

    .aside {

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