什么是BFC？BFC的使用场景是什么？

1. BFC的含义

BFC：（Block Formatting Context）块级格式化上下文

是一块独立的渲染区域（出发了BFC，这块区域就是一块独立的渲染区域）会将BFC里面的内容和外面的内容隔离

2. 触发BFC的方式：

position：absolute/fixed

float：left/right 浮动的元素多个放在一起，会互相隔开

overflow：非visible hidden/auto/scroll

display:inline-block

3. 实际例子（两端固定，中间自适应）

以浮动为例：

<style>
    *{
      margin: 0;
      padding: 0;
    }
    .father{
      width: 100%;
      height: 600px;
      background-color: pink;
    }
    .left{
      float: left;
      width: 300px;
      height: 300px;
      background-color: red;
    }
    .right{
      float: right;
      width: 300px;
      height: 300px;
      background-color: red;
    }

    .center{
      height: 300px;
      background-color: orange;
    }
  </style>
  <body>
  <div class="father">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
  </div>
</body>

可以看到图中.center的宽度被两个浮动的元素压在了下面，若是想实现两边固定中间自适应，只需要给.center加一个overflow：hidden;即可

.center{
      height: 300px;
      background-color: orange;
      overflow: center;
    }

此时就触发了BFC，实现了两端固定，中间自适应的功能

4. BFC的应用：

处理块级元素：上下margin合并的问题，

处理margin塌陷

清除浮动

实现自适应布局 flex => display:flex; 左边定宽，右边flex:1; 浮动 => 左边左浮动，右边有浮动，中间盒子overflow：hidden; 定位 => 先定位再设置padding即可