浅谈BFC和IFC

先说说FC，FC的含义就是Fomatting Context。它是CSS2.1规范中的一个概念。

它是页面中的一块渲染区域。而且有一套渲染规则，它决定了其子元素将怎样定位。以及和其它元素的关系和相互作用。BFC和IFC都是常见的FC。

分别叫做Block Fomatting Context 和Inline Formatting Context。

BFC

BFC（Block Formatting Context）叫做“块级格式化上下文”。BFC的布局规则例如以下：

1.内部的盒子会在垂直方向，一个个地放置；

2.盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的上下margin会发生重叠；

3.每一个元素的左边，与包括的盒子的左边相接触，即使存在浮动也是如此；

4.BFC的区域不会与float重叠；

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

6.计算BFC的高度时，浮动元素也參与计算。

介绍过了BFC的布局规范，再来说说哪些元素会产生BFC。

1.根元素。

2.float的属性不为none；

3.position为absolute或fixed；

4.display为inline-block。table-cell，table-caption。flex；

5.overflow不为visible

接下来说说BFC的作用和原理

首先看看自适应两栏布局

我们先定义两个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;
}

效果例如以下：

完整代码链接：

http://codepen.io/brizer/pen/yNxEbK

接下来看看清除内部浮动

首先是父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;
}

效果例如以下：