块级格式化上下文听说过多次,自己也去看了许多文章,但自己总是觉得晦涩,搞不清楚,后来又再去查了下很多文章,终于觉得自己理解一些了,希望自己描述出来能够准确和易懂。
Formatting context
Formatting context 是页面的一个渲染区域,它有着自己的渲染规则,决定渲染区域里面的元素怎么定位,以及里面的元素之间的相互作用。而块级格式化上下文(Block fomatting context)是其中的一种渲染规则。
渲染规则
- 渲染区域内的盒子(块级盒子)会在里面垂直放置。
- 盒子的垂直方向的距离由margin决定,而且相邻的盒子之间的margin会重叠。
- Block fomatting context区域内的元素从渲染区域最左边开始排列(如果是从左往右的格式化的话,从右往左就是最右边开始排列),即使是浮动也如此。
- Block fomatting context区域不会与浮动的元素重叠。
- Block fomatting context区域是与外面隔离的,不会影响到外表面的元素,外面也不会影响到里面。
- 如果触发Block fomatting context渲染规则的话,浮动元素也参与计算渲染区域的高度。
以下是从css2.1规范中文版中截取的一段文字,希望对阅读有帮助: