面试官：说一下什么是 BFC

前言

在前端开发中，bfc可能大多数人都听说过，但是真正去表述这个概念时，总是描述的不是很清楚，我也有一样的困惑。于是带着这个困惑下了这篇文章，希望可以帮助到大家，一起来看看吧~

定义

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

定义估计看不懂，我们直接看下面的栗子

好处

首先，我们先做一个demo，来形成以下的三个好处，然后使用bfc来解决这些问题

html 复制代码

<style>
      .outer {
        width: 300px;
        background-color: #333;
      }
      .inner {
        width: 100px;
        height: 100px;
      }
      .inner:nth-child(1) {
        background-color: #f00;
      }
      .inner:nth-child(2) {
        background-color: #0f0;
      }
      .inner:nth-child(3) {
        background-color: #00f;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="inner"></div>
      <div class="inner"></div>
      <div class="inner"></div>
    </div>
  </body>

我们看到正常情况是这个样式，然后开启margin塌陷，给inner加上 margin: 20px;，如图所示，造成了margin 塌陷，然后我们分别使用下面的方法来解决一下，剩余两个好处一样，就不展开举例了。大家可以自己下去试试。

好处1. 开启bfc后，不会产生margin塌陷问题，什么是margin塌陷可以看我的这篇文章（父元素开启）

好处2. 开启bfc后，自己不会被其他浮动元素所覆盖（自身开启）

css 复制代码

//自身开启
.inner:nth-child(1) {
  background-color: #f00;
  float: left;
}
//其他浮动元素
.inner:nth-child(2) {
  background-color: #0f0;
  float: left;
}

好处3. 开启bfc后，就算其子元素开启浮动，自身高度也不会塌陷（父元素开启）

css 复制代码

//	父元素开启
.outer {
  width: 300px;
  background-color: #333;
  float: left;
}
//子元素浮动
.inner {
  width: 100px;
  height: 100px;
  margin: 20px;
  float: left;
}

如何开启

根元素

html 元素，自带开启 bfc

浮动元素

css 复制代码

.outer {
        width: 300px;
        background-color: #333;
        float: left;
      }

给元素增加float之后也开启了bfc，如图所示

绝对定位、固定定位的元素

css 复制代码

.outer {
        width: 300px;
        background-color: #333;
        position: absolute;
      }

给元素增加定位之后也开启了bfc，如图所示

行内块元素

css 复制代码

.outer {
        width: 300px;
        background-color: #333;
        display: inline-block;
      }

元素增加行内块之后也开启了bfc，如图所示

表格单元格

table、thead、tbody....

overflow的值不为visible的块元素

flex伸缩项目

给outer父元素设置display：flex即可

所列容器

设置 column-count: 1;即可

Colum-span为all的元素

disable的值设置为flow-root（最推荐）

怎么回答这个问题

每每面试问道这个问题时，确实不好回答，大家可以按这个思路来回答：

解释：可以理解为是元素的一个特殊功能，默认情况下是关闭的，当满足特定条件下将会被激活，也就是该元素开启了bfc，所以现在有两个问题，一是激活有什么用，二是具体怎么激活，我们继续来看！

然后可以说一下开启bfc的好处，就是上面说的三点好处。
最后说一下解决方案就行了，其余的不用说太多了。

总结

在众多的bfc的解决办法中，都有一些副作用，display：flow-root是最为推荐的，在实际工作中也不用过于追求实现bfc，就可以在遇到问题的时候再使用bfc的解决方案来解决即可，更多的大家可以理解bfc的概念，也方便在面试中可以更好的去回答这个问题。