什么是BFC？面试前看这一篇就够了

什么是BFC？为什么面试时经常问这个问题？为什么那么多人都解释不清楚BFC？面试时该如何回答呢？

我们去看下官方文档怎么解释的：

块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

看完解释后，我们发现了一个问题，貌似看不懂耶

为什么会这样呢？

你能解释一下什么是色情吗？？

联邦最高法院大法官斯图尔特更有一句名言

我不知道什么是色情，不过，我看了之后，就能知道

I know it when I see it.

所以，虽然我不知道什么是BFC，但是写出样式，我就能知道这是不是BFC

BFC就是这样的东西

它没有定义
它只有特性/功能

BFC特性/功能

使用BFC 包住浮动元素
和浮动元素产生边界

如何回答面试官呢

不要解释什么是BFC！！！一解释就错
用下面的例子回答什么是BFC(当没有办法很抽象的说明时，就举例)

接下来，我们继续看官方文档，满足其中之一的都是建立了一个BFC

下列方式会创建块格式化上下文：

根元素（<html>）

浮动元素（元素的 float 不是 none）

绝对定位元素（元素的 position 为 absolute 或 fixed）

行内块元素（元素的 display 为 inline-block）

表格单元格（元素的 display 为 table-cell，HTML表格单元格默认为该值）

表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）

匿名表格单元格元素（元素的 display 为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot 的默认属性）或 inline-table）

overflow 值不为 visible 的块元素

display 值为 flow-root 的元素

contain 值为 layout、content或 paint 的元素

弹性元素（display 为 flex 或 inline-flex元素的直接子元素）

网格元素（display 为 grid 或 inline-grid 元素的直接子元素）

多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）

column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。
块格式化上下文包含创建它的元素内部的所有内容.

如何创建BFC?

读完MDN后，我们知道，满足其一，就是建立了一个BFC

float的值不是none
position的值是absolute、fixed
display的值是inline-block、flow-root、table-cell、table-caption、flex或者inline-flex、grid或者inline-grid
overflow的值不是visible

接下来，不如让我们看几个例子吧，使我们加深对其功能的理解