Question

为什么会有BFC？BFC究竟有什么用？

Answer 1

为了实现块级布局的一些特性呗，需要这样一个上下文来达成布局效果。

其实后来的 CSS 不光有 BFC ，还有 FFC GFC，Flex Formatting Context, Grid Formatting Context，我感觉 FFC GFC 容易理解一些，为了实现 flex 布局效果，需要引入 FFC 概念。display flex 就会创建一个 FFC，子元素就都在这个上下文中，大家一起根据一系列 flex 属性分摊可用空间。这个 Context 就跟一个类的实例上的方法共享同一个 this 一样，this 就是 context。你也许会问，为什么不直接用父子元素的概念来描述 flex 布局呢？不行，你忘了还有 display content，所以参与 flex 布局的所有子项在 DOM 层面可能根本不是兄弟节点，那么必须要引入 CSS 层面的概念来描述当前的 flex 布局。所以我们说，在同一个 flex 格式化上下文中的盒子们瓜分了可用空间。另一方面，你家的 flex item 不会错误地分到我家 flex container 的地，因为它不会加入到我家的 context 中来，FFC不一样，分谁家的地就不一样。 grid 布局同理。

说回 BFC ，其实跟 FFC GFC 类似，BFC 在布局上也是会形成一个共享空间，某些效果会限定在这个空间内。这个效果就是 float 。怎么定义 float 会影响哪些元素？兄弟节点？No no. 你仔细研究就会发现效果不止于兄弟节点间。那是什么？BFC ！我们需要一个上下文来限定范围。如果我们不在同一个 BFC 中，你往左飘还是往右，跟我都没关系。BFC 不像 FFC GFC 一样有专门的 CSS 语法，所以显得很晦涩。但是你只要理解，BFC 限定住了 float 的边界，float 不会影响 BFC 外的其他盒子。

啊，其实后来有了专门的 display 值来创建 BFC ，那就是 display: flow-root 啦，而不是隐晦地用 overflow 或者 clear。

另外 BFC 内还有一些其他特性，比如 margin 合并，同一 BFC 中相邻 margin 会合并，BFC 是范围，不同 BFC 中盒子的 margin 即使相邻也不能合并。