CSS学习之路——布局关键先生：BFC

BFC：Block Formatting Context.

先说说这个BFC，居然没在W3C参考文献里面找到这货...然后我记得以前有个大忽悠给我说过什么是BFC。所谓BFC，就是一种布局方式，在这种布局方式下，盒子们自所在的 containing block 顶部起一个接一个垂直排列，水平方向上撑满整个宽度 (除非内部的盒子自己内部建立了新的 BFC)。

大家可以这么去想，BFC就是一个范围作用域，通俗点说就是一个作用范围，再容易理解点就是把一堆东西打包放在一个盒子里面，外边的东西随便你怎么摆，怎么弄都不会影响我里面的布局啊什么的，这个盒子就可以理解为BFC。

如何创建BFC

废话说了那么多，那我们怎么样才能创建一个BFC呢？

当一个HTML元素满足下面条件的任何一点，都可以产生Block Formatting Context：
overflow的值不为”visible”
float的值不为”none”

display的值为 “table-cell”, “table-caption”, or “inline-block”中的任何一个

position的值不为 “static” 或 “relative”中的任何一个;
这大概就是产生BFC的因素了吧。

• 我最先接触的布局就是浮动来着，觉得浮动挺好用的，唯一麻烦的就是要清楚浮动。今天才知道了这种原来也有可以不用清除浮动来布局，只要对BFC这个概念清晰明了，完全可以不用清除浮动来布局了。

实例解析

那下面我们就用实例来说明一下怎么样才能让BFC包裹浮动元素让其浮动元素换行。

我们举一个很简单的栗子：

我想制作一个4个DIV块，2行2列的布局。其实，想要实现这种功能的方法有很多种，浮动布局、表格布局和基于display:inline-block的列表布局。这里我们着重讲解的是浮动布局，其他的布局样式暂时就一键盘敲过（PS：我不会告诉你这是为以后的博文做铺垫）。

用浮动布局实现

这是一般我们创建的DIV块：

这是使用浮动后的效果：

下面是代码：

<div id="diva">
        <div id="red" style="background: red;width: 100px;height: 100px;float: left;"></div>
        <div id="orange" style="background: orange;width: 100px;height: 100px;float: left;"></div>
    </div>
    <div id="divb">
        <div id="yellow" style="background: yellow;width: 100px;height: 100px;float: left;"></div>
        <div id="green" style="background: green;width: 100px;height: 100px;float: left;"></div>
    </div>

现在我们怎样才能让它们排列成2行2列捏？方法其实很简单，请看代码：

<div id="diva" style="display: inline-block">
        <div id="red" style="background: red;width: 100px;height: 100px;float: left;"></div>
        <div id="orange" style="background: orange;width: 100px;height: 100px;float: left;"></div>
    </div>
    <div id="divb">
        <div id="yellow" style="background: yellow;width: 100px;height: 100px;float: left;"></div>
        <div id="green" style="background: green;width: 100px;height: 100px;float: left;"></div>
    </div>

这样产生的效果就出来了：

是不是很简单，我们把red块和orange块放在一个BFC里面，这样，外边的布局影响不到我们整个BFC盒子里面的布局了.

另外我找了好写BFC相关的用法，自己琢磨不透还有就是别人写的比我好的我就发在这里，希望日后可以发现更多相关BFC的内容。
1、 BFC可以阻止垂直边距叠加问题

2、 BFC可以阻止元素被浮动覆盖

3、BFC可以决定清除浮动的范围