一、BFC没有明确的定义
我们首先来看 MDN 对 BFC 的描述
块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
下列方式会创建块格式化上下文：
- 根元素(
<html>)- 浮动元素（元素的
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就是这样的东西（堆叠上下文也是）
- 它没有明确的定义
- 只有对它的特性/功能的描述
二、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来解决，但不一定所有浏览器都支持）。
可以使用清除浮动(.clearfix)来代替BFC的特性1，且无副作用。
又比如上面的特性2实现左右自适应布局，可以使用flex布局来代替BFC的效果
再比如下面这个问题
child的margin-top没有被parent包住
我们可以用BFC来解决
触发BFC后，parent被child的margin-top撑大
但同样的，我们也可以使用其他方法来替代BFC，比如添加border
总之，任何时候都有可以替代BFC的方法，因此不必强行使用BFC。
四、总结
- 不要尝试去解释什么是BFC，BFC没有明确的定义
- 当面试被问到BFC时，以举例的方式说明BFC即可
- 任何时候都有可以替代BFC的方法，因此不必强行使用BFC
网友评论