什么是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
接下来，不如让我们看几个例子吧，使我们加深对其功能的理解
功能1 用BFC包住浮动元素
子元素浮动，脱离了普通文档流，父元素包不住子元素
这个时候如果想父元素包裹住子元素，该怎么办呢？
让父元素产生一个BFC
解决办法一：让父元素浮动
解决办法二：让父元素绝对定位
解决办法三：让父元素变成行内块元素
解决办法四：让父元素的overflow设置为hidden
解决办法五：让父元素的display设置为flow-root(触发BFC,无副作用)
注意：如果父元素产生了BFC，会把浮动的子元素包住，但是如果子元素里面还有浮动的子元素(也就是浮动的孙子)，这时，父元素是不会包住孙子元素的
功能二 和浮动元素产生边界
兄弟元素之间，其中左边元素浮动，让其划清界限
用 float+div 做左右自适应布局
解决办法一：浮动元素的margin-right没有生效，这个例子中，如果没有BFC，我们想要产生边距，需要将普通元素的margin-left设置为浮动元素宽度+想要产生的边距宽度
解决办法二：让右侧兄弟元素的display设置为flow-root
解决办法三：让右侧兄弟的display设置为flex
解决办法四：让右侧兄弟元素的overflow设置为hidden
总结
不明白BFC的概念，但是我们看到后，就知道这是BFC
所以，面试时不要去讲解BFC的定义！
那么，面试时如何说明BFC呢？举例子！！
