面试官：简单介绍一下BFC什么是BFC? BFC(Block formatting context)，名为块级格式化上下

什么是BFC?

BFC(Block formatting context)，名为块级格式化上下文，它的作用是形成独立的渲染区域，内部元素的渲染不会影响外界

形成BFC常见的条件(满足其中一条就可以触发BFC)

<div class="wrapper">
    <div class="box1"></div>
</div>

.wrapper {
  border: 1px solid red;
}
.box1 {
  width: 200px;
  height: 200px;
  background: blue;
  float: left;
}

我们希望看到的是一个红色边框的盒子内嵌套着一个蓝色的盒子

然而实际的情况是wrapper的高度丢失了，只剩下了边框的宽度2px

这种现象的原因是子元素为浮动定位，元素浮动了起来，导致子元素脱离了文档流，造成父元素wrapper的高度塌陷

我们可以通过给父元素添加overflow: hidden;(只要不是visible都可以)属性来触发BFC，形成独立的一块区域

.wrapper {
  border: 1px solid red;
  overflow: hidden;
}
.box1 {
  width: 200px;
  height: 200px;
  background: blue;
  float: left;
}

这样一来，计算BFC的高度的时候，会将浮动元素的高度也计算在内，这个时候我们可以看到BFC把box1包裹了起来

假设现在有两个div名为box，外边距margin设为100px，如下：

<div class="wrapper">
    <div class="box"></div>
    <div class="box"></div>
</div>

.box {
  width: 100px;
  height: 100px;
  background: blue;
  margin: 100px;
}

理论上我们获取到的box上下间距应为200px，但实际上下间距之间只有100px

这是CSS的一种规范：块的上外边距margin-top和下外边距margin-bottom会合并为单个边距，其大小为单个边距的最大值

解决方案：将这两个box放入两个不同的BFC中，这样就能做到这两个BFC之间不会相互影响