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就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然

参考文章

• 学习 BFC (Block Formatting Context)
• 最透彻的BFC原理剖析