BFC详解

BFC是什么？

BFC（Block formatting contexts）

浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。
—-w3c规范定义

BFC(Block formatting context)直译为”块级格式化上下文”。它的定位体系属于常规文档流。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

形成BFC具备的条件

浮动，绝对定位元素，inline-blocks, table-cells, table-captions,和overflow的值不为visible的元素，（除了这个值已经被传到了视口的时候）将创建一个新的块级格式化上下文。 —-w3c规范定义

我们以另一种方式来重新定义以便能更好的去理解。一个BFC是一个HTML盒子并且至少满足下列条件中的任何一个：
1. float的值不为none
2. position的值不为static或者relative
3. display的值为 table-cell, table-caption, inline-block, flex, 或者 inline-flex中的其中一个
4. overflow的值不为visible

BFC适用的地方

1.清除浮动，让浮动的元素回归正常的文档流
2. 解决文字围绕图片，（当图片是左浮动的时候，文字居于正常流中，文字会环绕图片，解决办法：将文字的标签上加上overflow:hidden的属性）

摘自：https://www.w3cplus.com/css/understanding-block-formatting-contexts-in-css.html