面试时常常会被问到有关BFC的问题，虽然网上有关讲解BFC的文章很多，基本大篇理论知识，虽收获不少，但面对面试时，却不知如何回答，不能条理清晰、简单明了的回答出面试官想考察的内容，容易导致回答着把自己都给弄晕了(尤其在紧张的情绪下，非常容易导致越说越“乱”，从而造成面试官觉得你理解不到位的认知😭)。所以特此记录下来，一为了加深对BFC的理解，二则为了面试能更好的回答。

相关面试题

简述你对BFC规范的理解
对BFC规范(块级格式化上下文：block formatting context)的理解
如何创建块级格式化上下文(block formatting context),BFC有什么用
对BFC规范的理解？
等等

虽然上面题目看起来好像不太一样，但是其实最终考察的点都是一样的，咱们只需分为什么是BFC、BFC有什么作用和如何创建BFC子问题来依依回答即可。

什么是BFC? (What)

逢管面试怎么问BFC，咱们就先给它回答一波什么是BFC。

BFC称为块级格式化上下文，是CSS中的一种渲染机制。是一个拥有独立渲染区域的盒子(也可以理解为结界)，规定了内部元素如何布局，并且盒子内部元素与外部元素互不影响。

对应的还有IFC、GFC和FFC(后两个CSS3引入)

BFC有什么作用? (Why)

上面我们知道BFC规定了内部元素的布局渲染，让我们查看下CSS规范文档，看下BFC有哪些规则:

文档规则

在一个块格式化上下文中，盒在垂直方向一个接一个地放置，从包含块的顶部开始。
两个兄弟盒之间的垂直距离由margin属性决定。
同一个块格式化上下文中的相邻块级盒之间的垂直外边距会合并。
同一个块格式化上下文中，每个盒的左外边界（left outer edge）挨着包含块的左外边界（对于从右向左的格式化，右外边界挨着）。
BFC的区域不会与float box重叠。
计算BFC的高度时，浮动元素也参与计算。

详细规则可以查看9.4.1 块格式化上下文

规则图解

规则1和规则2应该是好理解的，这里就不展开叙述，如果你不明白，那么你可能学了个假CSS。😂

同一个块格式化上下文中的相邻块级盒之间的垂直外边距会合并

这里是讲margin collapse, 其实是有如下情况会发生合并: 1. 父子外边距；2. 兄弟外边距；3. 没有高度的元素自身margin-top和margin-bottom会合并。

不过有几点需要注意：

需要属于普通流中的盒子: 也就是脱离文档流不算
毗邻: 也就是元素间没有被padding、border、clear和line box分隔开
垂直: 也就是margin-top和margin-bottom

只有满足上面几点才会发生margin合并效果。

上图可以看到，父子的margin-top和margin-bottom发生了合并。如何解决呢？触发元素的BFC即可(注：下面都以设置元素overflow:hidden来触发)，不过这里问题来了，我们是触发父元素的BFC还是子元素的BFC呢？

经过试验，我发现只有触发父元素的BFC才能避免margin合并，触发子元素的BFC并无效果。

这里父元素生效可以借用标准来解释:

Margins of elements that establish new block formatting contexts (such as floats and elements with "overflow" other than "visible") do not collapse with their in-flow children.（创建了BFC的元素不会和它的子元素发生外边距叠加）