BFC(blockformattingcontext )定义：
浮动和绝对位置元素、非块级箱子的块级容器(例如inline-blocks、table-cells、table-captions )和溢出值为“visiable”
BFC是块独立的作用域，可以理解为它有一些自己的特性
那如何产生BFC？
可以通过以下几种方法来生成BCF
浮点值不是无位置值，不是静态或延迟。 显示的值是inline-block、table-cell、flex、table-caption或inline-flexoverflow的值，其特征是不是visible BFC根元素会默认创建一个BFC
在同一个BCF中，每一个元素左外边与包含块（父块）的左边相接触（对于从右到左的格式化，右外边接触右边）， 即使存在浮动也是如此（尽管一个元素的内容区域会由于浮动而压缩包裹性），除非这个元素也创建了一个新的 BFC。
如上所述，container是BFC，并且浮动元件也是如此，使得中心的元件“在元件的左外侧与包括块(父块)的左接触”，使得它们相互重叠
创建了BFC的元素不能与浮动元素重叠。
果然在上述例子中，如果将d2制作为BFC，则两者不会重叠
当容器有足够的剩余空间容纳 BFC 的宽度时，所有浏览器都会将 BFC 放置在浮动元素所在行的剩余空间内。
同样，在上面的示例中，d2位于d1之后是因为这个规则。 如果容器只有60px的宽度，则d2(50px )不会填充剩下的10px空间，并将d2放置在下一行中。 (少数浏览器的实现可能不同。
css规定，在计算生成了 BFC 的元素的高度时，其浮动子元素应该参与计算。
因此，即使BFC中含有浮游元素也不会发生高度崩溃，可以利用BFC这一特性除去浮游。
两个相邻的普通流中的块在垂直位置的空白边会发生折叠现象。
这意味着位于同一BFC上的两个垂直窗口的边距重叠。 要解决这一现象，可以在两个块中分别包裹BFC，使其不折叠。 这是因为BFC还具有生成BFC的元素不会在空边与流中的子元素折叠的特性。
在上述情况下，margin会发生折叠。 本来是2em，折了应该只剩下1em了。 (所以说margin也可以理解为“最小间距”。 然后为了解决这种情况，我们分别在b1、b2包裹了BFC
这样就可以解决折叠问题了。 b1、b2不能直接成为BFC。 这样不能解决折叠问题。 因为b1、b2此时处于同一BFC中。 (您可以只注释掉. BFC中的overflow，看看会发生什么，并结合此现象了解以下特性。)
BCF就是页面上的一个隔离的独立容器，容器里面的子元素不会在布局上影响到外面的元素，反之也是如此。