BFC实际上被翻译为块级格式上下文。这是一个独立的渲染区域。仅涉及块级框。
块级框：显示属性是块，列表 - 项目，表的元素，它将生成块级框
1. BFC中的框将垂直安排
2.同一BFC中两个相邻盒子的外部距离将重叠
3.每个元素的左侧与块的左侧接触（对于从左到右的格式，否则相反），即使有浮动
4. BFC的面积不会与浮子盒重叠
5. BFC是一个独立的容器。包装中的元素
1.根元素
2.属性不是；
3.属性是：
4.属性不是：;
5.属性不是：;
从图中，我们可以看到Box1和Box2的外部距离已叠加，因为它们在同一BFC中。我们只需要将它们放在两个不同的BFC区域中，例如添加一个Box2即可在Box2的问题中添加一个问题。
代码效果
由于第一个盒子是漂浮的，第二个框没有漂浮，因此有一个重叠两个框的现象。目前，我们可以使用BFC第4条的规则。BFC的区域不会与浮子盒重叠。我们将一个添加到Box2中以解决此问题。
代码效应：
我们可以看到橙色盒子和红色盒子被绑在一起。红色盒子和黑匣子是父子之间的关系。由于红色盒子和橙色盒子在同一BFC中，如果我们设置了一个黑匣子，会发生什么？
如果我们将属性添加到黑匣子中，我们会发现页面上的红色框（Box2）和橙色框（Box）的布局更改，红色框（Box2）覆盖了橙色框（Box1）；但是我们想要黑匣子BoxAdd属性，页面布局不会更改，如何做？我们只需要让红色盒子产生一个新的BFC区域。
这样，我们完成了黑匣子设置属性，但不会影响红色框和橙色盒的页面布局。