BFC原理剖析CSS2.1规范中文版官方文档：http://www.w3.org/TR/2011/REC-CSS2-2

CSS2.1规范中文版

一、BFC是什么在解释BFC之前，先介绍一下BOX、Formatting、Contex的概念。

Box:css布局的基本单位

Box是CSS布局的对象和基本单位，直观点来说，说是一个页面是由很多个Box组成的。元素的类型和display属性，决定了这个Box的类型。不同类型的Box,会参与不同的Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染

block-level box:display属性为block,list-item,table的元素，会生成block-level box。并且参与block formatting context；
inline-level box:display 属性为inline,inline-block,inline-table的元素，会生成inline-level box。并且参与 inline formatting context；
run-in:css3中才有的，用的不是很多

formatting context Formatting context 是W3C CSS2.1规范中的一个概念，它是页面种的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用，最常见的Formatting context 有Block formatting context(简称BFC)和Inline formatting context(简称IFC) css3中还增加了GFC和FFC

BFC定义

BFC(Block formatting context)直译为'块级格式化上下文'。他是一个独立的布局环境，其中元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列

BFC布局规则：

内部的BOX会在垂直方向，一个接一个的放置，
Box垂直方向的距离有margin决定，属于同一个BFC的两个相邻的BOX的margin会发生重叠
每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)即使存在浮动也是如此
BFC的区域不会与float box重叠
BFC就是页面上的一个隔离的独立容器，容器里面的子元素影响到外面的元素，反之也如此，
计算BFC的高度时，浮动元素也参与计算

二、哪些元素会生成BFC？

根元素
float属性不为none
position 为absolute或fixed
display为inline-block，table-cell,table-caption,flex,inline-flex
overfolw不为visible

三、BFC的作用及原理

包含浮动元素问题案例：高度塌陷问题：在通常情况下父元素的高度会被子元素撑开，而在这里因为其子元素为浮动元素所以父元素发生了高度塌陷，上下边界重合高度为0，解决这这个问题只需要把父元素变成一个BFC就行了，常用办法给父元素设置overflow:hidden
垂直margin合并在css当中，相邻的两个盒子的外边距可以结合成一个单独的外边距，这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距折叠的结果：
- 两个相邻的外边距都是正数时，折叠结果是他们两者之间较大的值
- 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值
- 两个外边距一正一负时，折叠结果是两者的相加的和我们可以在其中一个外层在包裹一层容器，并触发该容器生成一个BFC(例如给外层容器加overflow:hidden)，那么两个盒子便不属于同一个BFC,就不会发生margin重叠了。
自适应两栏布局常见一种结构，左图片+右文字的两栏结构，左栏浮动，右栏受到影响会做成绕排效果，所以右栏要生成BFC（右栏加overflow:hidden）消除浮动造成的影响

参考资料