BFC？有点耳熟，但又不知道怎么解释；那这玩意究竟是什么呢？
官方（w3c规范）解释是：
浮动元素和绝对定位元素，非块级盒子的块级容器。如：inline-blocks,table-cells以及table-captions；还有overflow值不为visiable的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）
在BFC中，盒子从顶端开始垂直一个接一个的排列，两个盒子之间的缝隙由他们在margin值所决定；
在BFC中，两个相邻的块级盒子的垂直外边距会产生折叠；
在BFC中，每一个盒子的左边缘（margin-left）会触碰到容器的左边缘（border-left），右边也同理；
通俗点讲呢：
其实它就是一个独立的布局环境，我们也可以将它理解为一个容器或箱子（嘻嘻，只不过是看不见也摸不着的），所以容器里面物品的摆放是不受外界影响的。
所以简单的总结下就是：BFC中元素的布局是不受外界影响的（其实我们往往会利用这个特性来消除浮动元素对其非浮动的兄弟元素和其他子元素带来的影响），并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父级元素的边框排列。
只是浅谈下，不喜勿喷！略略略。。。