第一次看到层叠上下文这个东西并不知道这是个什么，去看了一些大神的文章，然后发现类似的有BFC，然后牵扯出一系列的什么是FC,什么是BFC,什么是IFC等。以下的东西是摘抄别人文章的一些内容和一些自己的理解，方便自己回忆吧。
FC(Formatting Context)翻译过来就是格式化上下文/格式化范围，指的是页面布局中的一块区域，它拥有自己的渲染规则，决定自己的子元素如何布局，并和其他元素的关系和作用。
根据css显示分类，xhtml元素被分为三种类型：块状元素，内联元素，可变元素。给页面元素加样式的时候我们得知道这个元素是什么类型，然后可以自己对元素类型转化。就像我们可以通过display来让某个内联元素变成块状元素（display：block）。有几个特别的元素img，input默认是inline-block；
BFC(块级格式化上下文)，只有块状元素起作用。相对应得IFC就是内联元素。（不知道我这样理解对不对）。
什么是块状格式化上下文（BFC）？相当于一个特殊的区域。
如果一个元素符合了成为BFC的条件，该元素成为一个隔离了的独立容器，元素内部元素会垂直的沿着其父元素的边框排列，和外部元素互不影响 。
触发 BFC 的条件如下：
- 浮动元素，float 除 none 以外的值
- 绝对定位元素，position（absolute，fixed）
- display 为以下其中之一的值 inline-blocks，table-cells，table-captions。//就是不是块级盒子的块容器
- overflow 除了 visible 以外的值（hidden，auto，scroll）
满足了上面这四个条件之一，就会创建一个BFC，它里面的内容所处的环境就是BFC环境。
在 CSS3 中，BFC 叫做 Flow Root，并增加了一些触发条件：
- display 的 table-caption 值
- position 的 fixed 值，其实 fixed 是 absolute 的一个子类，因此在 CSS2.1 中使用这个值也会触发 BFC ，只是在 CSS3 中更加明确了这一点。
元素设置 IE 特有的 CSS 属性 zoom: 1 触发 hasLayout ，zoom 用于设置或检索元素的缩放比例，值为“1”即使用元素的实际尺寸，使用 zoom: 1 既可以触发 hasLayout 又不会对元素造成其他影响，相对来说会更为方便。这是ie下的情况
BFC的作用：
(1) BFC 会阻止外边距折叠
我理解折叠的意思就是外边距会重叠，并不会分的很清，就像你的就是我的，我的也是你的。
外边距折叠的规则：仅当两个块级元素相邻并且在同一个块级格式化上下文时，它们垂直方向之间的外边距才会叠加。也就是说，即便两个块级元素相邻，但当它们不在同一个块级格式化上下文时它们的边距也不会折叠。因此，阻止外边距折叠只需产生新的 BFC 。
但是对于两个相邻元素来说，意义不大，没有必要给它们加个外壳，但是对于嵌套元素来说就很有必要了，只要把父元素设为BFC就可以了。这样子元素的margin就不会和父元素的margin发生折叠了。
(2) BFC 可以包含浮动的元素
这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界
(3) BFC 可以阻止元素被浮动元素覆盖
这是根据每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。这个原理实现的。
http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html这篇大神总结的blog比较简单清晰。