BFC是什么？

BFC定义

BFC（Block Formatting Context），块级格式化上下文，是一个独立的渲染区域，让处于BFC内部的元素与外部的元素互相隔离，使内外元素的定位不会互相影响，举个例子说明一下：

<div class="box1" id="bfc1">
    <div class="box2"></div>
    <div class="box3" id="bfc2">
      <div class="box4"></div>
      <div class="box5"></div>
    </div>
</div>

上面的例子中，bfc1是一个BFC区域，包含box2，box3，bfc2也是一个BFC区域，包含box4，box5，但是bfc1不包含box4，box5，所以每一个BFC区域只包含子元素，不包含子元素的子元素。

每一个BFC区域都是相互独立的，互不影响的。

触发BFC的条件

body根元素，body就是一个BFC区域；
浮动，不包括none；
定位，绝对定位absolute或固定定位fixed（二者都具备行内块特点）；
display为inline-block、table-cell、table-caption;
overflow为hidden、scroll、auto，不为visible；
弹性布局flex。

任意满足以上一个条件，元素就成为了一个BFC。

BFC解决了什么问题？

1.外边距塌陷问题

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box{
      width: 200px;
      height: 200px;
      background-color: aquamarine;
      margin: 50px;
    }
  </style>
</head>
<body>
  <div class="box"></div>
  <div class="box"></div>
</body>
</html>

这里给两个盒子都加了外边距，但是两个盒子的垂直距离并不是50+50=100px，而是50px，发生了外边距塌陷问题。

解决办法：将这两个盒子放入BFC区域中：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .bfc{
      overflow: hidden;
    }
    .box{
      width: 200px;
      height: 200px;
      background-color: aquamarine;
      margin: 50px;
    }
  </style>
</head>
<body>
  <div class="bfc">
    <div class="box"></div>
  </div>
  <div class="bfc">
    <div class="box"></div>
  </div>
</body>
</html>

2.包含塌陷问题

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father{
      width: 200px;
      height: 200px;
      background-color: aquamarine;
    }
    .son{
      width: 50px;
      height: 50px;
      background-color: hotpink;
      margin-top: 100px;
    }
  </style>
</head>
<body>
  <div class="father">
    <div class="son"></div>
  </div>
</body>
</html>

当父元素包含子元素，子元素设置了外边距的时候，会把父元素也拉下来，如图：

为了解决这个问题，在父元素添加条件（如添加overflow:hidden;），把父元素变为BFC区域

3.清除浮动的影响

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .father{
      width: 200px;
      background-color: aquamarine;
    }
    .son{
      width: 50px;
      height: 50px;
      background-color: hotpink;
      border: 1px solid #000;
    }
  </style>
</head>
<body>
  <div class="father">
    <div class="son"></div>
    <div class="son"></div>
    <div class="son"></div>
    <div class="son"></div>
  </div>
</body>
</html>

这里父元素没有设置高度，高度是由子元素撑开的，此时想把子元素浮动，在.son添加float:left，效果如下：

此时子元素浮动，父元素由于自身没有高度，看起来就消失了，为了解决这个问题，在在父元素添加条件（如添加overflow:hidden;），把父元素变为BFC区域

4.自动适应

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box1{
      width: 200px;
      height: 200px;
      background-color: hotpink;
      float: left;
    }
    .box2{
      width: 400px;
      height: 300px;
      background-color: aquamarine;
    }
  </style>
</head>
<body>
  <div class="box1"></div>
  <div class="box2"></div>
</body>
</html>

粉色盒子左浮动，导致浮动元素覆盖在处于标准流的绿色盒子上，如果想不覆盖，在绿色盒子上加条件使之变为一个BFC，效果如下。

使用场景：绿色盒子根据粉色盒子自适应变化。

总结

要根据BFC的特点：BFC区域相互独立，互不影响，在需要的地方使用。

BFC是什么？怎么利用BFC解决问题？