快速明白BFC

好长一段时间我对于BFC都不是很了解，一直听到别人说怎样会引起BFC，但我一直稀里糊涂。最近终于决定了解一下这个东西。我觉得要了解一样东西，首先要知道它解决了什么问题。

1、用处

• 1、包含内部浮动
• 2、排除外部浮动
• 3、阻止外边距重叠

2、为什么它可以做到上述的3件事

根据官方解释，BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素 ，也就是说它可以形成一个独立的区域，在这个区域里面，不会受到其他因素的影响。

3、案例

• 1、包含内部浮动

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

<style>
  .wrapper {
    background-color: red;
  }
  .div1 {
    width: 200px;
    height: 200px;
    float: left;
    background-color: aquamarine;
  }
</style>

呈现效果：

可见当前warpper是没有包含div1这个浮动元素的。 为什么呢？因为它不是一个BFC，然后我们可以去查看，如何可以让它成为一个BFC，从众多条件里挑一个合适的，比如display: flex;

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

<style>
  .wrapper {
    background-color: red;
    display: flex;
  }
  .div1 {
    width: 200px;
    height: 200px;
    float: left;
    background-color: aquamarine;
  }
</style>

呈现效果:

如此，就包含浮动了

• 2、清除外部浮动

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

<style>
  .wrapper {
    background-color: red;
  }
  .div1 {
    width: 200px;
    height: 200px;
    float: left;
    background-color: aquamarine;
  }
  .div2 {
    width: 200px;
    height: 200px;
    background-color:blanchedalmond;
  }
</style>

呈现效果：

因为当前div1是一个BFC，但是div2不是一个BFC，它会被别的元素影响，那么我们需要让它成为一个BFC，不受其他元素的影响，比如display: inline-block;

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

<style>
  .wrapper {
    background-color: red;
  }
  .div1 {
    width: 200px;
    height: 200px;
    float: left;
    background-color: aquamarine;
  }
  .div2 {
    width: 200px;
    height: 200px;
    background-color:blanchedalmond;
    display: inline-block;
    vertical-align: middle;
  }
</style>

呈现效果：

• 3、清除上下margin重叠

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

<style>
 .wrapper {
   background-color: red;
 }
 .div1 {
   width: 200px;
   height: 200px;
   background-color: aquamarine;
   margin: 20px;
 }
 .div2 {
   width: 200px;
   height: 200px;
   background-color:blanchedalmond;
   margin: 20px;
 }
</style>

呈现效果：

需要将wrapper变为BFC，以及div1、div2中的一个包含在一个BFC中

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

<style>
  .wrapper {
    background-color: red;
    overflow: auto;
  }
  .div1 {
    width: 200px;
    height: 200px;
    background-color: aquamarine;
    margin: 20px;
  }
  .div2-wrapper {
    overflow: auto;
  }
  .div2 {
    width: 200px;
    height: 200px;
    background-color:blanchedalmond;
    margin: 20px;
  }
</style>

呈现效果：

总的来说，我们遇到上述三种情况，即想要包含内部浮动/清除外部浮动/阻止外边距重叠，那么就可以去查看如何将元素变为BFC，找到一个合适的属性即可。