Sources:
- https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
- http://www.zhoumingzhi.com/2010/06/24/intro-block-formatting-context/
目录
Summary
A block formatting context is a part of a visual CSS rendering of a Web page. It is the region in which the layout of block boxes occurs and in which floats interact with each other.（当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。为了让我们有个感性的认识，举个不太合适的例子。你可以把一个页面想象成大的集装箱，这个集装箱里装的货物就是HTML元素。在现实生活中为了避免不同人的货物相互混淆，都是把货物打好包装再装入集装箱，这样的话无论你包装里面的货物怎么摆放，都不会影响到其他人的货物。那么这个包装就可以被想象成Block Formatting Context。）
A block formatting context is created by one of the following:
- the root element or something that contains it
- floats (elements where float is not none)
- absolutely positioned elements (elements where position is absolute or fixed)
- inline-blocks (elements with display: inline-block)
- table cells (elements with display: table-cell, which is the default for HTML table cells)
- table captions (elements with display: table-caption, which is the default for HTML table captions)
- elements where overflow has a value other than visible
- flex boxes (elements with display: flex or inline-flex)
A block formatting context contains everything inside of the element creating it that is not also inside a descendant element that creates a new block formatting context.
Block formatting contexts are important for the positioning (see float) and clearing (see clear) of floats. The rules for positioning and clearing of floats apply only to things within the same block formatting context. Floats do not affect the layout of things in other block formatting contexts, and clear only clears past floats in the same block formatting context.
Blocking Formatting Context在生产中的作用
Block Formatting Context可以阻止边距折叠（margin collapsing）
我们知道在一般情况下，两个上下相邻的盒子会折叠它们垂直方向接触到的边距，这种情况只会发生在同一个Block Formatting Context中。换句话说，在同一个布局环境中（Block Formatting Context）是边距折叠的必要条件。这也就是为什么浮动的元素和绝对定位元素不会发生边距折叠的原因（当然还有很多种情况也不会折叠）。
Block Formatting Context可以包含内部元素的浮动
考虑一下下面的例子（请用标准浏览器查看）：
在上面的代码本意是做一个两行两列的布局，但是由于#red, #orange, #yellow, #green这四个div同在一个布局环境中，即便通过#c1, #c2这两个div划分，浮动之后它们还会一个接着一个排列，并不会换行。我们要做的就是把这四个div两两划分到不同的布局环境之中，从而闭合浮动。通过上面的分析，让#c1形成新的Block Formatting Context就可以解决问题。
我做了个实验，如上所示，其实这个时候你会发现#c11和#c21里的元素全部浮动之后，#c11和#c21的高度都变成0，宽度仍然撑满了父容器。这四个彩色方框纷纷脱离了他们的父容器
Block Formatting Context可以阻止元素被浮动覆盖
在标准浏览器下可以看到，普通的#right元素被浮动的#left元素所覆盖了。要想避免这种情况，有一种方法就是让#right形成新的Block Formatting Context。但是这里一定要注意的是，浮动不会覆盖的只是Block Formatting Context的border-box。换句话说，形成Block Formatting Context元素的margin还是会被浮动所覆盖掉的。
如下，我们给#left添加overflow: hidden以创建一个block formatting context，看看效果如何吧。另外我还加了margin以证明margin会被浮动元素覆盖掉，但是需要注意，如果黄框的宽度为0，也就是黄框的margin-left和margin-right直接相连的时候，左边那个红框也只是覆盖住黄框的margin-left而已，并不会覆盖掉黄框的margin-right。
Other Notes
未完待续
