《面试系列》之什么是BFC?

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

相关面试题

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

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

什么是BFC? (What)

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

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

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

BFC有什么做用? (Why)

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

文档规则

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

详细规则能够查看9.4.1 块格式化上下文

规则图解

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

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

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

不过有几点须要注意：

1. 须要属于普通流中的盒子: 也就是脱离文档流不算
2. 毗邻: 也就是元素间没有被padding、border、clear和line box分隔开
3. 垂直: 也就是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的元素不会和它的子元素发生外边距叠加）

那触发子元素为什么没有生效呢？这里咱们先看下兄弟之间的合并。

一样发生了margin合并，这里不存在父子关系，因此咱们随便触发某个元素的BFC来看看效果。

发现仍是发生margin合并，按照规则，虽然触发了child1的BFC，可是能够得出两个元素仍是处于同一个BFC。

通过以上试验，我得出了未彻底经官方认知的结论:

BFC影响的是内部元素

1. 好比父子中，设置child为BFC，由于影响的是内部，因此child仍是和par处于同一个BFC中
2. 兄弟中，设置child1为BFC，影响的是child1的子元素，但child1和child2仍是处于同一个BFC

因此我可使用一个div进行包裹，并触发该div的BFC，从而使得处于不一样的BFC中，来避免margin合并。

完美！🎉，咱们这样就能够经过触发BFC来避免margin合并了，固然避免margin合并还有不少方法，好比设置border等等。

BFC的区域不会与float box重叠

当咱们设置一个元素为float，该元素脱离文档流，会覆盖在下方元素上面。

而若是设置元素BFC，将不会与float重叠，这样咱们能够经过该属性来实现自适应两栏布局。

计算BFC的高度时，浮动元素也参与计算

由于浮动元素会脱离文档流，因此包含块元素的高度不会包含该浮动元素，致使高度发生塌陷。使用BFC，包含块的高度包含浮动元素在内。

根据规则+实例，给出BFC有什么做用。

如何建立BFC？(How)

1. 根元素，即html
2. float的值不为none
3. overflow的值不为visible
4. display的值为inline-block、table-cell、table-caption
5. position的值为absolute或fixed
6. 等等

---

若有不对之处，还恳请指出，谢谢~ 🖖 原文连接

好累，花了将近4个小时，第一遍没保存，又从新写了一遍。😭