第20题 什么是BFC？什么条件下会触发？渲染规则？应用场景有哪些？

1.什么是 BFC？

W3C 对 BFC 的定义如下：

浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks,table-cells,和 table-captions），以及 overflow 值不为”visiable”的块级盒子，都会为他们的内容创建新的 BFC（Block Fromatting Context，即块级格式上下文）。

2.触发条件

一个 HTML 元素要创建 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 为 flex 或 inline-flex 元素的直接子元素）
• 网格元素（display 为 grid 或 inline-grid 元素的直接子元素）等等。

3.BFC 渲染规则

（1）BFC 垂直方向边距重叠

（2）BFC 的区域不会与浮动元素的 box 重叠

（3）BFC 是一个独立的容器，外面的元素不会影响里面的元素

（4）计算 BFC 高度的时候浮动元素也会参与计算

4.应用场景

4.1 防止浮动导致父元素高度塌陷

现有如下页面代码:

<style>
.container {
  border: 10px solid red;
}
.inner {
  background: #08BDEB;
  height: 100px;
  width: 100px;
}
</style>
<div class="container">
  <div class="inner"></div>
</div>

接下来将 inner 元素设为浮动:

.inner {
  float: left;
  background: #08BDEB;
  height: 100px;
  width: 100px;
}

会产生这样的塌陷效果：

但如果我们对父元素设置 BFC 后, 这样的问题就解决了:

.container {
    border: 10px solid red;
    overflow: hidden;
}

同时这也是清除浮动的一种方式。

4.2 避免外边距折叠

两个块同一个 BFC 会造成外边距折叠，但如果对这两个块分别设置 BFC，那么边距重叠的问题就不存在了。

现有代码如下:

.container {
   background-color: green;
   overflow: hidden;
}

.inner {
   background-color: lightblue;
   margin: 10px 0;
}
<div class="container">
  <div class="inner">1</div>
  <div class="inner">2</div>
  <div class="inner">3</div>
</div>

此时三个元素的上下间隔都是 10px, 因为三个元素同属于一个 BFC。 现在我们做如下操作:

  <div class="container">
    <div class="inner">1</div>
    <div class="bfc">
      <div class="inner">2</div>
    </div>
    <div class="inner">3</div>
  </div>

style 增加:

.bfc{
    overflow: hidden;
}

效果如下:

以明显地看到间隔变大了，而且是原来的两倍，符合我们的预期。