BFC（Block Formatting Content，块格式上下文）
CSS规范中对 BFC 的描述
块格式化上下文
浮动，绝对定位元素，非块盒的块容器（例如，inline-blocks，table-cells和table-captions）和'overflow'不为'visible'的块盒会为它们的内容建立一个新的块格式化上下文
在一个块格式化上下文中，盒在竖直方向一个接一个地放置，从包含块的顶部开始。两个兄弟盒之间的竖直距离由'margin'属性决定。同一个块格式化上下文中的相邻块级盒之间的竖直margin会合并
在一个块格式化上下文中，每个盒的left外边（left outer edge）挨着包含块的left边（对于从右向左的格式化，right边挨着）。即使存在浮动（尽管一个盒的行盒可能会因为浮动收缩），这也成立。除非该盒建立了一个新的块格式化上下文（这种情况下，该盒自身可能会因为浮动变窄）
MDN 对 BFC 的描述
一个块格式化上下文（block formatting context） 是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。
一个块格式化上下文由以下之一创建：
- 根元素或其它包含它的元素
- 浮动元素 (元素的 float 不是 none)
- 绝对定位元素 (元素具有 position 为 absolute 或 fixed)
- 内联块 (元素具有 display: inline-block)
- 表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
- 表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
- 具有overflow 且值不是 visible 的块元素，
- display: flow-root
- column-span: all 应当总是会创建一个新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一个多列容器中。
一个块格式化上下文包括创建它的元素内部所有内容，除了被包含于创建新的块级格式化上下文的后代元素内的元素。
块格式化上下文对于定位 (参见 float) 与清除浮动 (参见 clear) 很重要。定位和清除浮动的样式规则只适用于处于同一块格式化上下文内的元素。浮动不会影响其它块格式化上下文中元素的布局，并且清除浮动只能清除同一块格式化上下文中在它前面的元素的浮动。
张鑫旭对 BFC 的描述
http://www.zhangxinxu.com/wordpress/2015/02/css-deep-understand-flow-bfc-column-two-auto-layout/
BFC全称”Block Formatting Context”, 中文为“块级格式化上下文”。啪啦啪啦特性什么的，一言难尽，大家可以自行去查找，我这里不详述，免得乱了主次，总之，记住这么一句话：BFC元素特性表现原则就是，内部子元素再怎么翻江倒海，翻云覆雨都不会影响外部的元素。所以，避免margin穿透啊，清除浮动什么的也好理解了。
BFC 到底是什么？
- 我不知道什么是 BFC
- 但是你写出样式，我就知道这是不是 BFC
BFC 就是这样的东西（堆叠上下文也是）
1. 它没有定义
2. 它只有特性/功能
功能1：爸爸管儿子
用 BFC 包住浮动元素。(这 TM 不是清除浮动，.clearfix 才是清除浮动）
http://js.jirengu.com/rozaxufetu/1/edit?html,css,output
-
我们定义一个父子元素，一个子元素，发现父元素是默认包裹着子元素的
image.png -
单独给子元素设一个浮动，发现父亲包不住儿子了
image.png - 如何让父元素包住子元素呢？可以让父元素成为浮动
- 浮动，绝对定位元素，非块盒元素（例如，inline-blocks，table-cells和table-captions）和'overflow'不为'visible'的块盒会为它们的内容建立一个新的块格式的上下问
- 非块盒元素就是不是block的block，CSS中有很多display的值，最常见的有三个：inline,block,inline-block。这个inline-block就是不是块的块
- image.png
- 但是由于CSS的不正交，可能会导致其他情况的出现
- 最新有一个功能是display: flow-root;这个就是专门用于产生块级元素的，而不会带来其他影响，就是用来触发BFC的。其余都可以不用的
- 如果一个BFC里面的元素的元素被另一个BFC包围，就不管了；一个BFC包含所有内容，除了被包含于创建新的块级格式的上下文的后代元素中的元素
- image.png
- 我们可以看到父元素保得住子元素，却包不住孙子，这是因为子元素也是一个BFC了
功能2：兄弟之间划清界限
用 float + div 做左右自适应布局
http://js.jirengu.com/felikenuve/1/edit?html,css,output
-
同一个块格式化上下文中的相邻块级盒之间的竖直margin会合并
image.png -
我们定义两个同级元素，发现当哥哥浮动的时候，弟弟会占据上来，并且有重合的部分，但是文字还是会避开重合的部分的，但是如果我们给弟弟添加一个overflow：auto，就可以做成左右布局了，没有重合的部分
image.png
image.png -
这样会有一个BUG，想要有间隔，就需要以界面最左边为目标，margin会伸入到哥哥那边去，占据相同的区域
image.png
image.png - BFC和文档流是两个事情：BFC影响是宽高，而文档流影响的是排列顺序
-
BFC会出现BUG的，如黑色被盖住了，不然刚看见；如果可以使用clearfix就使用这个
image.png -
除非所有的都支持display: flow-root;，不然不要使用BFC来清除浮动；使用flex也是可以达到效果的
image.png - 只有面试的时候要BFC的，没有任何情况一定要使用BFC；千万不要跟面试官讲什么是BFC
-
这种情况下，爸爸被儿子带着顶出来了，用BFC可以，但是有BUG，因为不是display: flow-root;
image.png
image.png -
给父元素一个border-top就可以挡回去
image.png
