BFC属于css中的一个重要内容，深入的理解并熟练应用BFC对开发是有很大好处的。
一、定义：指块级格式化上下文，是页面中CSS渲染的一个部分，主要在区域内决定盒子的布局和浮动，各BFC之间互不影响。
二、如何产生BFC：
1、根元素；
2、float值不为none；
3、position值为absolute或者fixed；
4、display值为inline-block、table-cell、table-caption、flex、inline-flex；
5、overflow值不为visible。
三、触发BFC后，BFC的布局规则：
1、内部的块级元素在垂直方向上一个接一个的放置；
2、块级元素垂直方向上margin重叠，取最大值（用一个BFC中的两个相邻元素）；
3、每个元素的margin box的右边，与包含块的border box的左边相接触（即使是浮动也是如此）；
4、BFC的区域不会与float box重叠；
5、BFC是一个独立的区域（容器），容器里面的子元素不会影响外面的元素；
6、计算BFC的高度时，浮动元素也要参与计算。
原文：http://www.cnblogs.com/alisa-sister/p/7710110.html