块级格式化上下文

  块级格式化上下文听说过多次，自己也去看了许多文章，但自己总是觉得晦涩，搞不清楚，后来又再去查了下很多文章，终于觉得自己理解一些了，希望自己描述出来能够准确和易懂。

Formatting context

  Formatting context 是页面的一个渲染区域，它有着自己的渲染规则，决定渲染区域里面的元素怎么定位，以及里面的元素之间的相互作用。而块级格式化上下文(Block fomatting context)是其中的一种渲染规则。

渲染规则

1. 渲染区域内的盒子(块级盒子)会在里面垂直放置。
2. 盒子的垂直方向的距离由margin决定，而且相邻的盒子之间的margin会重叠。
3. Block fomatting context区域内的元素从渲染区域最左边开始排列(如果是从左往右的格式化的话，从右往左就是最右边开始排列)，即使是浮动也如此。
4. Block fomatting context区域不会与浮动的元素重叠。
5. Block fomatting context区域是与外面隔离的，不会影响到外表面的元素，外面也不会影响到里面。
6. 如果触发Block fomatting context渲染规则的话，浮动元素也参与计算渲染区域的高度。

以下是从css2.1规范中文版中截取的一段文字，希望对阅读有帮助：