什么是BFC？ BFC(blockformattingcontexts )是一个块级格式化上下文，翻译后位于上下文环境.MDN：
“块格式上下文”(block formatting context )是网页可视CSS渲染的一部分。 这是显示块级框布局的区域，也是浮动层要素相互作用的区域。
BFC是如何诞生的？ 块格式上下文是通过以下方式之一创建的：
1 .根元素或包含根元素的其他元素
2 .浮动元素(元素的浮点不是none ) )。
3 .绝对位置元素(元素是位置为absolute或fixed ) )。
4 .内联块(元素具有display :内联块) ) ) ) ) ) ) )。
5 .表格单元格(元素是display: table-cell，具有HTML表格单元格的默认属性) )。
6 .表格标题(元素是display: table-caption，具有HTML表格标题的默认属性) ) ) )。
具有溢出且值不可见的块元素。
8.display :流动路由
9.column-span: all必须始终创建新的格式上下文，即使具有column-span: all的元素不在多列容器中包围。
除了创建新块级格式化上下文的子元素中包含的元素之外，块的格式化上下文将包含创建该上下文的元素中的所有内容。
BFC特性在一个BFC之中在垂直方向上从所包含的块的上部起一个个相邻地布局，两个相邻的箱的垂直距离由margin属性决定，在一个BFC中的两个相邻块级的箱的垂直外缘距离上产生凹陷
在BFC中，在水平方向上，每个框的左端与包含块的左端接触。 从右到左的格式相反。 (如果存在浮动元素，行盒可能由于浮动元素而收缩，而如果盒形成新的BFC，则盒也可能由于浮动元素而变窄)，除非浮动元素与其他元素相互作用。
现在我终于明白了为什么在《精通CSS》中提到外距离塌陷时，为什么设置了这么多条件：
文档流中的块级元素
垂直外距离直接相遇
第一个条件是防止形成BFC。 请注意，BFC内部的子元素之间会形成外部边距塌陷，但BFC元素和其他块级元素不能形成外部边距塌陷。
(请参阅https://segment fault.com/q/101000008875016 )
BFC外壳的3种用途1，通过浮动，设置了例如overflow :隐藏；position:absolute；浮点：左； 的元素，【其内部】的浮动被移除。 (请注意，所有移除浮动都是浮动的。 position:absolute|fixed那不叫浮动。 ）
2、修复margin折叠
3、双层布局自适应(仅启用溢出浮动) () ) ) ) ) ) ) ) ) ) ) )