CSS——格式化上下文之BFC

参考：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，元素的左边总是触碰到容器的左边，即使存在浮动也是如此。