关于BFC

不知道何时起，BFC这个概念在前端界被传的神乎其神，那些面试官更是如此，上来一句就是，你是如何理解BFC的？

BFC，即Block Formatting Context（块级格式化范围），指的是由于元素使用了某些CSS属性，从而影响了它周围元素（包括嵌套元素）和自身的布局呈现方式。通俗的来讲，它就是一种布局方式，也许你之前用过这种方法来处理页面布局的兼容性，但是你可能并不知道BFC这样一个概念。

BFC形成条件

• float的值不为”none”
• overflow的值不为”visible”
• display的值为 “table-cell”, “table-caption”, or “inline-block”中的任何一个
• position的值为 “absolute” 或 “fixed”中的任何一个

BFC的实例

1.解决嵌套元素的边距重叠问题

关于边距重叠，我们来看一个实例：

<div id="box1" style="width:200px;height:100px;background:green;">
　　<div id="box2" style="width:100px;height:50px;margin:10px auto 0;background:red;"></div>
</div>

我们想要实现的是，box2应该有10px的上边距，结果页面呈现的是box2上边与box1重叠了，而是box1有10px的上边距。如下图：

这就是发生了边距重叠，于是我们利用创建BFC的条件，给id为box1的元素加一个 overflow:auto ：

<div id="box1" style="width:200px;height:100px;background:green;overflow:auto">
　　<div id="box2" style="width:100px;height:50px;margin:10px auto 0;background:red;"></div>
</div>

从而，得到我们想要的效果：

当然，你也可以给box1加一像素边框，同样可以达到类似的效果。

关于边距重叠，我们再来看一个实例：

<div id="box1" style="width:100px;height:100px;margin:10px;background:green;"></div>
<div id="box2" style="width:100px;height:100px;margin:20px 10px;background:red;"></div>

我们想要实现的是，box1的下边与box2的上边有30px的距离，但是页面呈现的布局是：

可以看到它们之间只有20px的间距，这说明也发生了边距的重叠。这里要说明下，如果上下都有边距，那么页面渲染的是取更大的边距。如果是负边距的话，则取的是绝对值较大的边距。

2. 阻止非浮动元素被浮动覆盖

关于浮动元素的覆盖，我们再来看一个实例：

<div id="box1" style="width:100px;height:50px;background:green;float:left;"></div>
<div id="box2" style="width:200px;height:100px;background:red;"></div>

我们想要实现的是，box1与box2在同一行，并且box2是紧挨着box1右侧，但页面呈现的布局是：

显然浮动元素覆盖了未浮动的元素，此时给box2创建一个BFC，给box2加上overflow:hidde属性，从而得到这样的效果：

3. 清除元素的内部浮动

我们经常会碰到由于嵌套元素的浮动而导致父级元素高度塌陷的问题，关于清除元素的内部浮动，我们来看一个实例：

<div id="one">
　　<div id="box1" style="width:100px;height:100px;float:left;background:red;"></div>
　　<div id="box2" style="width:100px;height:100px;float:left;background:green;"></div>
</div>
<div id="two">
　　<div id="box3" style="width:100px;height:100px;float:left;background:orange;">　</div>
　　<div id="box4" style="width:100px;height:100px;float:left;background:purple;">　</div>
</div>

通过以上代码，由于div是块级元素，所以你可能认为box1与box2在第一行，box3与box4在第二行，可是，页面布局却呈现如下：

由于id为one和id为two的这两个元素的子元素设置了浮动属性，所以父级元素高度无法撑开，导致id为one和id为two的元素在同一行。解决方法是，给id为one和id为two的元素加上height:auto;overflow:hidden;属性，或者直接给id为one的元素加display:inline-block; 这些都是通过创建BFC来解决的。最终，我们得到如下效果：

关于BFC，必定还有更多的，更深的研究。CSS的强大自然不是几段文字所能描述的。相信此篇博客，只是BFC的一个开始。