面试官：请说说什么是BFC？大白话讲清楚一、什么是BFC 官方定义： BFC（Block Formatting Cont

一、什么是BFC

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

简单来说： BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

二、如何创建一个BFC

常用的方式有以下几种：

overflow: hidden
display: inline-block / table-cell / flex / inline-flex
position: absolute / fixed
float：left / right

其实我们经常使用到BFC，只不过不知道它是BFC而已。

三、BFC有什么特点

BFC就是一个块级元素，块级元素会在垂直方向一个接一个的排列
BFC就是页面中的一个隔离的独立容器，容器里的标签不会影响到外部标签
垂直方向的距离由 margin 决定，属于同一个BFC的两个相邻的标签外边距会发生重叠
计算BFC的高度时，浮动元素也参与计算

四、BFC有什么作用

1、解决外边距折叠问题

// html
<div class="div1"></div>
<div class="div2"></div>

// css
.div1 {
  width: 100px;
  height: 100px;
  background-color: #000;
  margin-bottom: 10px;
}

.div2 {
  width: 100px;
  height: 100px;
  background-color: #000;
  margin-top: 20px;
}

第一个 div 的 margin-bottom 设置为 10px，第二个 div 的 margin-top 设置为 20px，我们可以看到两个盒子最终的边距是20px，是两者之中较大的一个，这就是外边距重叠的问题。

为了解决这个问题，我们可以让这两个 div 分属于不同的 BFC，或者只要把其中一个 div 放到 BFC 中就可以。原因是：BFC 就是页面上的一个隔离的独立容器，容器里面的元素不会对外边产生影响。

// html
<div class="wrapper">
  <div class="div1"></div>
</div>
<div class="div2"></div>

// css
.wrapper{
  /* 开启BFC */
  overflow: hidden;
}

.div1 {
  width: 100px;
  height: 100px;
  background-color: green;
  margin-bottom: 10px;
}

.div2 {
  width: 100px;
  height: 100px;
  background-color: red;
  margin-top: 20px;
}

现在的代码可以解决外边距重叠的问题啦！但是注意，在这个案例中，虽然使用定位以及浮动也可以创建 BFC，但是这个元素会从当前文档流中移除，不占据页面空间，并且可以和其它元素重叠，导致下边的 div 会把上边的 div 给覆盖掉。

2、制作两栏布局

BFC的区域不会与浮动的元素区域重叠。我们可以利用这个特性来创建两栏布局（左边宽度固定，右边宽度自适应）

案例一：

// html
<div class="left"></div>
<div class="right"></div>

// css
.left {
  width: 200px;
  height: 100px;
  background-color: green;
  float: left;
}

.right {
  height: 100px;
  background-color: red;
  overflow: hidden; /* 创建BFC */
}

当不加 overflow: hidden 时，右边盒子会占满浏览器，与左边盒子重叠在一起。

当加了 overflow: hidden 时，右边盒子不会与左边盒子重叠在一起。

案例二：

// html
<div class="father">
  <div class="left"></div>
  <div class="right">
    哈哈哈哈哈哈啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
  </div>
</div>

// css
.father {
  width: 200px;
  border: 5px solid blue;
}

.left {
  width: 50px;
  height: 50px;
  background-color: green;
  float: left;
}

.right {
  height: 100px;
  background-color: red;
}

当在父元素中只设定一个盒子浮动，另一个不浮动时，会造成第二个盒子在第一个盒子的下方，被覆盖掉一部分（但文字不会被覆盖）。

此时给第二个元素设置BFC：

 .right {
   height: 100px;
   background-color: red;
   overflow: hidden;
 }

3、清除元素内部的浮动

这里清除浮动的意思并不是清除你设置的元素的浮动属性，而是清除设置了浮动属性之后给别的元素带来的影响。例如我们给子元素设置浮动，那么父元素的高度就撑不开了。

BFC有一个特性：计算BFC的高度时，浮动元素也参与计算，利用这个特性可以清除浮动。

// html
<div class="div1">
  <div class="son1">a</div>
  <div class="son2">b</div>
</div>

// css
.div1 {
  width: 150px;
  border: 1px solid red;

  /*使用BFC来清除浮动*/
  overflow: hidden;
}

.son1, .son2 {
  width: 100px;
  height: 100px;
  background-color: blue;
  float: left;
}

.son2 {
  background-color: greenyellow;
}

当不加 overflow: hidden 时，父盒子没有高度，其高度撑不开

当加了 overflow: hidden 时，即可解决问题