赵的拇指

这两天看一些关于面试的题目，老是会看到BFC这个词。作为一个野路子页面仔，对于这类的名词到底是什么还是懵逼的。
那这个BFC到底是个什么呢？经过一番查阅发现原来就是这个东西…

BFC全称是”Block Formating Context”，官方解释，翻译翻译就是块级格式话上下文，再翻译翻译就是按照块级盒子布局。
一个页面是由很多个盒子 组成的,不同类型的盒子,会参与不同的 Formatting Context（决定如何渲染文档的容器）,因此盒子内的元素会以不同的方式渲染,这就是说BFC内部的元素和外部的元素不会互相影响。

首先看看BFC的形成条件

1. float的值不为none；
2. position的值不为static或relative；
3. display的值是inline-block、table-cell、table-caption、flex、inline-flex；
4. overflow的值不为visible。

以上四个条件只要满足一个即可（多个也可）。

BFC中的盒子的布局模式

在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。
w3c规范如下：

在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）。浮动也是如此（尽管盒子里的行盒子 Line Box 可能由于浮动而变窄），除非盒子创建了一个新的BFC（在这种情况下盒子本身可能由于浮动而变窄）。

BFC的一些作用

外边距折叠

在常规的流布局中，两盒子的距离由外边距margin决定，一般遵循以下规则：

1. 两个相邻的外边距都是正数的时候，外边距取二者较大的；
2. 两个相邻的外边距都是负数的时候，外边距取二者绝对值较大的；
3. 两个相邻的外边距一正一负的时候，取二值之和。

而如果两个盒子在不同的BFC中他们的外边距就不会折叠

清除浮动

常规的浮动元素会脱离文档流，就不会撑开父元素（父元素没有设置height），这时可以用BFC来清除浮动，常见的清除浮动方法overflow: auto;就是这个道理。
同理，文字环绕也可以这么解决。

多列布局

以下代码可以轻松实现一个两列布局，左边定宽，右边自动占满。

css:

.sidebar{
    background: #10ae58;
    float: left;
    width:180px;
}
.main{
    background: #3d3d3d;
    overflow:hidden;
}

html:

<div class="container">
    <div class="sidebar">
        <p>侧边内容</p>
    </div>
    <div class="main">
        <p>主要内容</p>
    </div>
</div>

三列四列更多列实现方法也是类似。

写在最后

其实在之前写代码的过程中一直有在用BFC的相关姿势，只是自己不知道而已。
哎，还是自己的基础知识太薄弱。
还有以上文章内容纯属自己的个人片面理解，如有不同见解欢迎留下意见。