什么是BFC：
BFC就是Block formatting contexts （块级格式化上下文）的简称。
w3c规范中的BFC定义：
浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。
在BFC中，盒子从顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin 值所决定的。在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。
在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）。
BFC的通俗理解：
首先BFC是一个名词，是一个独立的布局环境，我们可以理解为一个箱子（实际上是看不见摸不着的），箱子里面物品的摆放是不受外界的影响的。转换为BFC的理解则是：BFC中的元素的布局是不受外界的影响（我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。）并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。
那么我们该怎么使用BFC呢，如何触发BFC呢？：
1、float 除了none以外的值
2、overflow 除了visible 以外的值（hidden，auto，scroll ）
3、display (table-cell，table-caption，inline-block, flex, inline-flex)
4、position值为（absolute，fixed）
5、fieldset元素
在以上的情况里可以创建BFC。
BFC有一下特性：
1、内部的Box会在垂直方向，从顶部开始一个接一个地放置。
2、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加
3、每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4、BFC的区域不会与float box叠加。
5、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
6、计算BFC的高度时，浮动元素也参与计算。
至此，您或许明白了为什么 overflow:hidden或者auto可以闭合浮动了，真是因为父元素创建了新的BFC。
IE6-7的显示引擎使用的是一个称为布局（layout）的内部概念，由于这个显示引擎自身存在很多的缺陷，直接导致了IE6-7的很多显示bug。当我们说一个元素“得到 layout”，或者说一个元素“拥有 layout” 的时候，我们的意思是指它的微软专有属性 hasLayout 。IE6-7使用布局的概念来控制元素的尺寸和定位，那些拥有布局（have layout）的元素负责本身及其子元素的尺寸设置和定位。如果一个元素的 hasLayout 为false，那么它的尺寸和位置由最近拥有布局的祖先元素控制。
触发hasLayout的条件：
1、position: absolute
2、float: left|right
3、display: inline-block
4、width: 除 “auto” 外的任意值
5、height: 除 “auto” 外的任意值 （例如很多人闭合浮动会用到 height: 1% ）
6、zoom: 除 “normal” 外的任意值
7、writing-mode: tb-rl
在 IE7 中，overflow 也变成了一个 layout 触发器：
1、overflow: hidden|scroll|auto （ 这个属性在IE之前版本中没有触发 layout 的功能。 ）
2、overflow-x|-y: hidden|scroll|auto （CSS3 盒模型中的属性，尚未得到浏览器的广泛支持。他们在之前IE版本中同样没有触发 layout 的功能）
综上所述：
1、在支持BFC的浏览器（IE8+，firefox，chrome，safari）通过创建新的BFC闭合浮动；
2、在不支持 BFC的浏览器 （IE6-7），通过触发 hasLayout 闭合浮动。
参考文章：