CSS-- BFC
看图中共有 3 个 p 元素，每个 p 元素设置width100px，height 40px， magrin 20px，预期结果应该是 4个方向margin都为20px，每两个元素之间上下就应该是40px，但很明显 两个p元素上下之间的margin值为20，像是重叠了一样，与预期结果不同，这是什么原因导致的呢？答案是 BFC。下面学习总结一下 BFC。
BFC 是什么
BFC （block formatting context）：即块级格式化上下文，在 BFC 内是一个独立的渲染区域，定义了BFC 内部包含的 块级元素 的布局规则，BFC 之间都是相互独立不会互相影响的。
除了BFC 还有IFC （inline formatting context）、GFC（grid）、FFC（flex）。
下面区分一下块级元素和行内元素：
-
块级元素（block box）：
当元素display属性值为block、list-item、table时即为块级元素，块级元素独自占一行，垂直排列。 -
行内元素（inline-box）：
当元素display属性值为inline、inline-block、inline-table时即为行内级元素，行内元素与其他行内元素紧挨着排放，没有单独成行的特性。
生成 BFC 的情况
符合以下条件的元素其内部就会生成BFC：
- 根元素
- 设置浮动属性的元素，float的值不为none
-
overflow的值不为visible -
display的值为inline-block、table-cell、table-caption - 绝对定位的元素： position的值为absolute或fixed
- 弹性盒 flex boxes (元素的display: flex或inline-flex)；
BFC 的作用
生成 BFC 的元素内部包含的子元素会遵循以下规则，按照其规则进行布局排列：
- 内部的
块级元素会在垂直方向上一个接一个的放置 - 处于同一个 BFC 中两个相邻
块级元素的margin会发生重叠（塌陷），与方向无关。如本文开头的例子。 - BFC 中包含的块级元素的左外边距与容器块的左边界相接触（从左向右），即使存在浮动元素也是会左侧接触。
- BFC 区域不会与外部 float 元素区域重叠。
- 计算 BFC的
高度时，其包含的浮动子元素也参与计算（所以当普通div 父元素包含浮动子元素但是高度塌陷时，可以将父元素display设置为inline-block或者overflow设置为hidden 使其生成 BFC 将浮动子元素的高度包含计算进去，解决高度塌陷的问题） - BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然