BFC

Block Float Content.

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

• float 的值不为 none
• position 的值不为 static 或者 relative
• display 的值为 table-cell, table-caption, inline-block, flex, 或者 inline-flex 中的其中一个
• overflow 的值不为 visible

BFC 中的盒子对齐

在BFC中，每个盒子的左外边框紧挨着包含块的左边框（从右到左的格式，则为紧挨右边框）。即使存在浮动也是这样的（尽管一个盒子的边框会由于浮动而收缩），除非这个盒子的内部创建了一个新的BFC浮动，盒子本身将会变得更窄）。

BFC 可以解决的问题：

• 外边距折叠问题：在常规文档流中，盒子都是从包含块的顶部开始一个接着一个垂直堆放。两个兄弟盒子之间的垂直距离是由他们个体的外边距所决定的，但不是他们的两个外边距之和。当兄弟元素的外边距不一样时，将以最大的那个外边距为准。
  • 我们可以使用 BFC 来防止折叠问题。
  • 当第二和第三个兄弟元素属于不同的BFC时，在他们之间将不会有任何外边距折叠
• 使用 BFC 来包含浮动，同时让容器元素具有高度
  • 我们通常使用清除浮动来解决这个问题，最受欢迎的方法是使用一个clearfix的伪类元素。
    • 我们可以手动设置容器高度或者使用 clear:both; 的方式清除浮动；或者定义父级元素为 BFC
• 使用BFC来防止文字环绕
• 多列布局之中也可以使用 BFC