CSS 什么是BFC？

一、BFC没有明确的定义

---

我们首先来看 MDN 对 BFC 的描述

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

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

• 根元素()
• 浮动元素（元素的 float 不是 none）
• 绝对定位元素（元素的 position 为 absolute 或 fixed）
• 行内块元素（元素的 display 为 inline-block）
• 表格单元格（元素的 display 为 table-cell，HTML表格单元格默认为该值）
• 表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
• overflow 值不为 visible 的块元素
• display 值为 flow-root 的元素

块格式化上下文包含创建它的元素内部的所有内容

块格式化上下文对浮动定位（参见 float）与清除浮动（参见 clear) 都很重要。浮动定位和清除浮动时只会应用于同一个BFC内的元素。浮动不会影响其它BFC中元素的布局，而清除浮动只能清除同一BFC中在它前面的元素的浮动。外边距折叠（Margin collapsing）也只会发生在属于同一BFC的块级元素之间。

看完是不是不太明白？

我们再来看看CSS规范中对 BFC 的描述

浮动，绝对定位元素，非块盒的块容器（例如，inline-blocks，table-cells和table-captions）和'overflow'不为'visible'的块盒会为它们的内容建立一个新的块格式化上下文

在一个块格式化上下文中，盒在竖直方向一个接一个地放置，从包含块的顶部开始。两个兄弟盒之间的竖直距离由'margin'属性决定。同一个块格式化上下文中的相邻块级盒之间的竖直margin会合并

在一个块格式化上下文中，每个盒的left外边（left outer edge）挨着包含块的left边（对于从右向左的格式化，right边挨着）。即使存在浮动（尽管一个盒的行盒可能会因为浮动收缩），这也成立。除非该盒建立了一个新的块格式化上下文（这种情况下，该盒自身可能会因为浮动变窄）

还是不太能理解 BFC 到底是什么

我们不难发现，MDN和CSS规范都只是对BFC进行功能性的描述，并没有给出非常明确的定义。

总之，BFC就是这样的东西（堆叠上下文也是）

1. 它没有明确的定义
2. 只有对它的特性/功能的描述

二、BFC的功能

---

1. 用 BFC 包住浮动元素

这是什么意思呢，见下图

类似于清除浮动

从上图中我们可以看出，BFC区域不会与浮动重叠（触发BFC后，child没有浮动在parent上方），BFC内部是包含浮动元素的，会计算浮动元素的高度（触发BFC后，parent被child撑开）

同理，我们可以将 MDN 中描述可以触发 BFC 的条件都试一下，如position: absolute、overflow: hidden等都会产生上图中的效果，你可以自行试验。

但我们还是推荐使用CSS3新增的一个属性display: flow-root（前提是浏览器支持该属性），因为该属性是专门用来触发BFC的，而使用其他属性来触发BFC则可能会产生副作用（CSS不正交），关于BFC的副作用见下文。

其实，一个BFC不仅仅只是包住浮动元素，实际上

块格式化上下文包含创建它的元素内部的所有内容

也就是说，只要是在一个BFC内部，不管是浮动元素，还是绝度定位元素，或者元素的margin等等，全都应该是包含在这个BFC内部的。

2. 两个BFC之间相互隔离

个人理解：每个BFC都是一个独立的容器，外部不会影响内部的元素，内部也不会影响外部的元素。即如果是两个BFC容器，它们会相互“隔离”，互不影响。

上图中，刚开始“哥哥”与“弟弟”重合在一起（“哥哥”是BFC，“弟弟”不是），当为“弟弟”触发BFC后，“哥哥”与“弟弟”骤然分离。

利用BFC的这一特性，可以用 float + div 来做 左右自适应布局

三、不必强行使用BFC

---

虽说使用BFC或许能解决CSS中的我们碰到的许多问题，但BFC却不是必需的，因为任何时候你能用BFC解决的问题，同样也可以用其他能够替代BFC的方法来解决，而且BFC可能还会产生副作用。

比如上面的特性1的例子，虽说BFC同样可以达到清除浮动的效果，但如果你使用的是overflow: hidden来触发BFC，就会产生bug（可以使用display: flow-root来解决，但不一定所有浏览器都支持）。

overflow:hidden触发BFC的bug

可以使用清除浮动(.clearfix)来代替BFC的特性1，且无副作用。

又比如上面的特性2实现左右自适应布局，可以使用flex布局来代替BFC的效果

flex实现左右自适应布局

再比如下面这个问题

child的margin-top没有被parent包住

我们可以用BFC来解决

触发BFC后，parent被child的margin-top撑大

但同样的，我们也可以使用其他方法来替代BFC，比如添加border

总之，任何时候都有可以替代BFC的方法，因此不必强行使用BFC。

四、总结

---

1. 不要尝试去解释什么是BFC，BFC没有明确的定义
2. 当面试被问到BFC时，以举例的方式说明BFC即可
3. 任何时候都有可以替代BFC的方法，因此不必强行使用BFC