css中的BFC

先说说FC，FC的含义就是Fomatting Context。它是CSS2.1规范中的一个概念。它是页面中的一块渲染
区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。BFC和IFC
都是常见的FC。分别叫做Block Fomatting Context 和Inline Formatting Context。

---

• 这篇先讲BFC，下一篇讲IFC。

---

BFC（Block Formatting Context）

叫做“块级格式化上下文”。

BFC的布局规则(特性)如下：

1.内部的盒子会在垂直方向，一个个地放置；
2.盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的上下margin会发生重叠；
3.每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此；
4.BFC的区域不会与float重叠；
5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此；
6.计算BFC的高度时，浮动元素也参与计算。

哪些元素会产生BFC（形成条件）:

1.根元素；
2.float的属性不为none；
3.position为absolute或fixed；
4.display为inline-block，table-cell，table-caption，flex；
5.overflow不为visible。

作用：

1.解决margin重叠的问题（通过添加独立的BFC）
2.结局浮动元素塌陷问题（通过在父级添加overflow：hidden）
3.解决侵占浮动元素问题（通过加overflow：hidden清除浮动）

下面是几个简单的例子

首先定义两个div：
<div class="aside"></div>
<div class="main"></div>
然后定义css：
div { width:300px; }
.aside { width: 100px; height: 150px; float: left; background: black; }
.main { height:200px; background-color:red; }
效果图如下：

这正满足了规范的第三条：
每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此。
所以如果我们需要将黑色区域撑到红色的左边，就需要利用规范的第四条：
BFC的区域不会与float重叠。
也就是说我们需要创造BFC区域。我们通过将红色区域的overflow设为hidden来触发BFC：
.main { overflow:hidden; height:200px; background-color:red; }
效果如图：

接下来看看清除内部浮动
首先是父div套子div：
<div class="parent">
<div class="child"></div>
</div>
然后是css：
.child { border:1px solid red; width:100px; height:100px; float:left; }
.parent { border:1px solid black; width:300px; }
效果如图：

可以看到，父div压根就没有被撑开。
我们再回顾一下BFC规范中的第六条：
计算BFC的高度时，浮动元素也参与计算。
所以我们需要将父div触发为BFC，也就是将其overflow设为hidden：
.parent { border:1px solid black; width:300px; overflow:hidden; }
效果如图：

可以看到父div已经撑开了。

---

margin重叠

首先定义两个垂直的div：
<div class="p"></div>
<div class="p"></div>
然后定义margin:
.p { width:200px; height:50px; margin:50px 0; background-color:red; }
可以看到margin重叠后的效果：

我们再看看BFC规范的第二条：
盒子垂直方向的距离由margin决定，属于用一个BFC的两个相邻Box的上下margin会发生重叠。
说明两者属于同一个BFC，所以我们需要两个div不属于同一个BFC。
为第二个div套一个父亲div，然后讲其overflow设为hidden来激活一个BFC就可以使margin不再重叠。
<div class="p"></div>
<div class="wrap">
<div class="p"></div>
</div>
.wrap { overflow:hidden; }
效果如下：