面试经常被问到谈谈你对BFC的理解？BFC，全称为Block Formatting Context，中文为“块级格式化上

BFC，全称为Block Formatting Context，中文为“块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

BFC目的：是形成一个相对于外界完全独立的空间，让内部的子元素不会影响到外部的元素。

1.从一个现象说起：

一个盒子不设置高度，当内容子元素都浮动时，无法撑起自身。这一现象说明，盒子没有形成BFC。

2.如何创建BFC

（1）float的值不是none

（2）position的值不是static或relative

（3）display的值是inline-block、table-cell、table-caption、flex、inline-flex

（4）overflow为hidden

<body>
  <div class="father">
    <div class="son"></div>

  </div>
</body>
<style>
  .father{
    width: 100%;
    /* float: left; */
    /* position: absolute; */
    /* display: inline-block; */
    overflow: hidden; 
   
  }
  .son{
    width: 100%;
    height: 300px;
    background-color: aqua;
    float: left;
  }
</style>

3.BFC的其他作用：

（1）可以取消盒子的margin塌陷

（2）BFC可以阻止元素被浮动元素覆盖



<body>
  <div class="father">
    <div class="son"></div>
  </div>
</body>

<style>
  .father{
    width: 200px;
    height: 500px;
    background-color: brown;
    overflow: hidden;
  }
  .son{
    width: 100px;
    height: 300px;
    background-color: aqua;
    margin-top: 30px;
  }
</style>

<body>
  <div class="father">
    
    <div class="son"></div>
    <div class="son"></div>
    <div class="son-last"></div>
  </div>
</body>

<style>
  .son{
    width: 200px;
    height: 200px;
    background-color: aqua;
    float: left;
  }
  .son-last{
    width: 200px;
    height: 300px;
    background-color:darkred;
    overflow: hidden;
  }
</style>