详解BFC

首先我们来介绍一下BFC得概念

BFC是一个块级格式化上下文，它是指一个独立得块级渲染区域，只有Block-level BOX参与，该区域拥有一套属于自己得渲染和规则来约束块级盒子得布局，且与区域外部无关。

总而言之：

• BFC是一个独立渲染区域，它丝毫不会影响到外部元素

是不是听起来很懵，我来解释一下，就是一个区域里面我们发现一些样式得错误，我们本来想得到得样式，却因为一些原因没有得到我们所想要得效果，这边主要是在css层面上得样式没有达到得效果。

那么我们当时是这么发现应该具备BFC这个概念得呢？

.sonm{
    width: 300px;
    height: 300px;
    float: left;
    background-color: aquamarine;
  }

<div class="fartherm">
    <div class="sonm"></div>
    <div class="sonm"></div>
    <div class="sonm"></div>
</div>

通过这段代码我们可以得到

像这样子得浮动，这里都显而易见，

那么我们看一xia父元素那边长宽

 你会发现父元素只有宽度而没有高度，所以这里我们就得到了为什么会使用BFC得初衷

那么我们就该讲解使用BFC得方法了

总共有四种方法（俗称创建BFC）

1.使用position：absolute得方法

2.overflow-hiden（最好得方法）

3.float：left

4.dispaly：inline-block

那么我们在父元素那边随机创建一个BFC我们就可以看到父元素具备了高度

而BFC主要是出现在以下两个方面出错

1.产生高度塌陷得时候

   .farther{
    width: 200px;
    height: 400px;
    background-color: aqua;
  }
  .son{
    width: 100px;
    height: 200px;
    background-color: blue;
    margin-top: 20px;
  }  


<div class="farther">
    <div class="son"></div>
  </div>

以上代码显示得样式为

 你会发现这里并没有我们所需要得son距离farther有margin向上30px得高度，这时候就是高度塌陷

我们所使用得方法一样是创建一个BFC来阻止高度塌陷，我就用推荐得方式：overflow：hidden；（写在父元素得位置上）

就会得到以下样式

 那么高度塌陷就会消失，得到我们想要得效果

2.阻止浮动得元素被覆盖

   .sons{
    width: 200px;
    height: 300px;
    background-color: blueviolet;
    float: left;
  }
  .sons-last{
    width: 100px;
    height: 500px;
    background-color: aquamarine;
  } 

 <div>
    <div class="sons"></div>
    <div class="sons"></div>
    <div class="sons-last"></div>
  </div>

我们可以得到得样式为

你会发现浮动得元素被遮盖住了，我们一样创建一个BFC来得到我们原本想要的效果

样式如下：

 

 从而达到我们所需要得左浮动

以上便是BFC里面得概念和详解。