bfc是什么呢？
掏粪男孩？
当然不是咯。bfc，英文名block formatting context，直译为“块级格式化上下文”。它是w3c css 2.1规范中的一个概念，决定了元素如何对内容进行定位，以及与其他元素的关系和相互作用。下表就是成为bfc元素后的特性以及如何成为bfc。
bfc(参考w3c)
特性
进行盒模型布局的时候，如果一个元素符合了成为bfc的条件，那么该元素就成为了一个隔离的独立容器，bfc的区域不会与外部浮动元素重叠，且在同一个bfc内的两个相邻块级元素的外边距会重叠，但不同 bfc外边距不会重叠；在计算bfc高度时，将它内部的浮动元素也包含在内。
总之，bfc与外部元素互不影响
触发bfc的方法
1、  根元素
2、  float属性不为none
3、  position为absolute或fixed
4、  overflow的值不为visible
5、  display的值为table-cell，table-caption，inline-block中的任何一个。
谈了半天，你可能会问，咦，葛葛，那使元素成为bfc到底有么子用呢？
这就得，从它的特性入手，特别是我加粗的部分，可以知道，bfc元素可以防止与浮动元素重叠嘛。
恩？什么意思。看看下面的demo
bfc

运行代码，打开chrome调试器，点击normaldiv元素，可以看到，normaldiv有一部分被floatdiv挡住了，即它们发生了重叠。
那么我们触发normaldiv为bfc呢。例如设置它的属性overflow为hidden，我们运行代码，再看看结果。
bfc

从运行结果可以看出，当我们触发normaldiv为bfc后，它与floatdiv就没有发生重叠啦。
好吧，咦，我也知道bfc的确可以防止与浮动元素重叠，那有什么用呢？
自适应布局！！！（下篇详讲）
从它的特性入手，我们还可以知道bfc可以阻止外边距重合。
我们都知道，块级元素垂直方向的margin是会重合，例如这样
test_slice

从上面的运行结果（红色区域）可以知道，它们垂直方向的margin重叠了。
原因是因为，它们属于同一个bfc（根元素），外边距是会重叠滴。所以只要将它们其中一个属于另一个bfc，就可以啦。
代码和demo见下：
bfc

运行代码，发现的确如此。
从它的特性入手，我们还可以知道bfc可以清楚浮动。以前我知道解决“塌陷”问题的方法中，可以在父元素中加入overflow:hidden，就可以使父元素将浮动元素包裹起来，且清楚浮动，但不知道原因，后来才知道原来它将父元素bfc了，所以在计算父元素高度时，将浮动元素计算在内，又由于bfc不影响外部元素，所以就清楚浮动咯。
这是没有将父元素bfc的运行效果图
bfc
这是将父元素bfc后的运行效果图
bfc
哈，的确如此哦。
看来善于触发元素bfc，好处多多呀。