BFC：一个神奇的渲染区域

2019-03-18 本文已影响0人小面包呀

一、什么是FC、BFC

FC：格式化上下文（Formatting Context），其实指的是一个渲染区域，拥有一套渲染规则，它决定了其子元素如何定位，以及与其他元素之间的关系和相互作用。

FC又分为BFC、IFC、GFC与FFC，这里只讲BFC。

BFC: 块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。 (出自MDN)

BFC用来生成一个隔离的空间、清除内部元素的相互影响。

二、BFC的生成条件：

根元素或包含根元素的元素
浮动元素（元素的 float 不是 none）
绝对定位元素（元素的 position 为 absolute 或 fixed）
行内块元素（元素的 display 为 inline-block）
表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）
overflow 值不为 visible 的块元素
display 值为 flow-root 的元素
contain 值为 layout、content或 strict 的元素
弹性元素（display为 flex 或 inline-flex元素的直接子元素）
网格元素（display为 grid 或 inline-grid 元素的直接子元素）
多列容器（元素的 column-count 或 column-width 不为 auto，包括 ``column-count 为 1）
column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。

以上较为常见的有overflow:hidden、float:left/right、position:absolute与display: flex。也就是说，当满足上诉其中的一个或多个条件时，就代表了该元素已经创建了一个BFC了。

三、BFC的规范

内部的盒子会在垂直方向，一个个地放置；
盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的上下margin会发生重叠；
每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此；
BFC的区域不会与float重叠；
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此；
计算BFC的高度时，浮动元素也参与计算。

四、BFC可以用来干什么

1. 利用BFC避免外边距折叠

在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。折叠遵循如下规则：
* 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
* 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
* 两个外边距一正一负时，折叠结果是两者的相加的和。

举个栗子：
当两个盒子处于同一个BFC时，外边距会发生重叠现象

.demo1, .demo2 {
  height: 100px;
  width: 100px;
  background-color: red;
  margin-top: 20px;
  margin-bottom: 10px;
}
.demo2 {
  background-color: lightblue;
}

<div class='box'>
  <div class='demo1'></div>
  <div class='demo2'></div>
</div>

外边距折叠

解决方式：
使两者不处于同一个BFC中即可。

新建BFC

2. 防止发生因浮动而产生的高度塌陷问题

当一个元素属性为浮动时，会脱离标准文档流（也就是所谓的"脱标"），导致它的父元素计算高度时无法计算到浮动的元素。

举个栗子：
当父元素box不是BFC时，无法计算出浮动元素的高度，导致content(内容)无法被撑开。

.box {
  background-color: skyblue;
}
 .demo1 {
  height: 100px;
  width: 100px;
  background-color: rgba(0,0,0, 0.1);
  float: left;
 }

<div class='box'>
  <div class='demo1'></div>
</div>

子元素浮动

解决方式：
根据上述的BFC规范的最后一点可以看出，可以通过生成BFC(方法参考上述的BFC生成条件，这里使用display: flow-root作为栗子)来解决浮动时高度无法被计算的问题。

.box {
   background-color: skyblue;
   display: flow-root;   //different，无副作用，适合在父元素使用
}
.demo1 {
  height: 100px;
  width: 100px;
  background-color: rgba(0,0,0, 0.1);
  float: left;
}

<div class='box'>
  <div class='demo1'></div>
</div>

通过BFC来清除浮动影响

3. 解决浮动时元素重叠

刚才上面有讲到：浮动会产生‘脱标’。脱标会导致覆盖标准文档流的元素上，因此会发生元素重叠的现象。

举个栗子：
当我们在一个元素中放置了一个浮动元素和一个普通元素时，浮动元素会被置于普通元素中。

.demo1 {
  height: 100px;
  width: 100px;
  float: left;
  background-color: rgba(0, 0, 0, 0.1);
}
.demo2 {
  height: 200px;
  width: 200px;
  background-color: skyblue;
}

<div class='box'>
  <div class='demo1'></div>
  <div class='demo2'></div>
</div>

元素重叠

解决办法：
由上面的规则（BFC的区域不会与float重叠）可得，为非浮动元素建立一个BFC就可以避免此情况发生。

.demo1 {
  height: 100px;
  width: 100px;
  float: left;
  background-color: rgba(0, 0, 0, 0.1);
}
.demo2 {
  height: 200px;
  width: 200px;
  background-color: skyblue;
  overflow: auto;
}

<div class='box'>
  <div class='demo1'></div>
  <div class='demo2'></div>
</div>

通过创建BFC来解决重叠