参考：https://segmentfault.com/a/1190000011211625
1.在CSS中，元素定义的环境有两种，也就是前面提到：块格式化上下文（BFC）和行内格式化上下文。这两种上下文定义了在CSS中元素所处的环境，格式化则表明了在这个环境中，元素处理此环境中应当被初始化。用一句话来描述就是：
元素在此环境中应当如何排版布局等
2.生成BFC的条件
- float的值不为none
- position的值为absolute或者fixed
- overflow的值不为visible
- display的值为inline-table，inline-flex，flex，table-cell, table-caption
3.BFC的应用
1.防止垂直margin重叠
有点布局经验的朋友都知道margin collapse，也就是相邻的垂直元素同时设置了margin后，实际margin值会塌陷到其中较大的那个值。其根本原理就是它们处于同一个BFC，符合“属于同一个BFC的两个相邻元素的margin会发生重叠”的规则。
我们可以在其中一个元素外面包裹一层容器，并触发该容器生成一个BFC。那么两个元素便属于不同的BFC，就不会发生margin重叠了：
如果没有设置BFC，则会发生外边距折叠
如果是我的话会直接设置200px，或者只设置其中一个元素的margin（懒可以偷，但原理需知道）
2.防止浮动子元素高度塌陷
如果我们将.parent元素的overflow: hidden去掉，那么.parent元素就获取不到浮动元素的高度了。如下图
但是加上overflow属性后触发了BFC，计算BFC的高度时，浮动元素也参与了计算。
3.防止文字（或其他元素）环绕
正常情况下，如果一个块级元素设置成了float，那么他的兄弟元素会环绕其布局。这里我们给.text加上overflow，文字所在的区域就产生了BFC，元素的左边总是触碰到容器的左边，即使存在浮动也是如此。
