简单来认识下BFC(块级格式化上下文)-一一网

这是我参与更文挑战的第20天，活动详情查看：更文挑战

前言

面试的时候面试官如果要考察css，经常会问什么是BFC。而且，我们写样式的时候有时候我们已经触发了BFC，但是我们可能还不知道。所以，今天来讲讲BFC, 一起来认识下它。

定义

BFC, 全称是（Block Formatting Context），翻译过来就是块级格式化上下文。Block，块级元素，Formatting Context，格式化上下文，是指一个由块级元素形成的独立渲染区域，在这块区域里，元素的布局由特定的约束规则决定，不受外界其它元素影响。

形成BFC

怎么形成BFC呢？只要元素具有以下特性，就可形成BFC:

float不为none的浮动元素
position的值为absolute或fixed的定位元素
overflow不为visible的元素
display:flex的弹性元素
display:inline-block的行内块级元素
display:table-cell的单元格元素
根元素

还有一些不是很常见的，这里就不罗列了

BFC的约束规则

形成BFC后，那它内部是什么约束规则呢？主要有以下规则：

内部的元素会在垂直方向由上往下放置；
BFC就是一块独立渲染区域，外面的元素不会影响BFC的内部；
同一个BFC内部的元素的margin会重叠；
BFC的区域不会与float的元素区域重叠；
计算BFC的高度时，浮动元素也参与计算；

BFC的应用

结合BFC的约束规则,我们可以这样应用：

解决margin重叠
清除浮动导致祖先元素高度为0的问题
解决和浮动元素重叠

下面通过例子一一解答

解决margin重叠

  <style>
    .father {
      margin: 20px;
      background-color: red;
    }

    .son {
      width: 100px;
      height: 100px;
      background-color: blue;
      margin: 20px;
    }
  </style>
  <div class="father">
    <div class="son"></div>
  </div>
复制代码

根据上面定义形成BFC的条件，大家可以看到因为整个根元素是BFC区域，所以根据上面的规则 “同一个BFC内部的元素的margin会重叠”,所以发生margin重叠了，如果要解决margin重叠，就得把父元素变成BFC。因为 “BFC就是一块独立渲染区域，外面的元素不会影响BFC的内部”；

  <style>
    .father {
      margin: 20px;
      background-color: red;
      display:flex; /* 形成BFC */
    }

    .son {
      width: 100px;
      height: 100px;
      background-color: blue;
      margin: 20px;
    }
  </style>
  <div class="father">
    <div class="son"></div>
  </div>
复制代码

margin没有重叠了！！！

清除浮动导致父元素高度为0的问题

<style>
  .father {
    background-color: red;
  }

  .son {
    width: 100px;
    height: 100px;
    background-color: blue;
    float: left;
    margin: 20px;
  }
</style>
<div class="father">
  <div class="son"></div>
</div>
复制代码

大家可以看到，父元素高度为0；这是因为元素浮动后，是脱离文档流的；父元素计算高度时，是不会把浮动的子元素的高度计算在内的；所有，就会导致父元素的高度为0。如果要解决这个问题，就可以把父元素形成BFC,根据上面的规则计算BFC的高度时，浮动元素也参与计算,这样就没有问题了。

<style>
  .father {
    background-color: red;
    display:inline-block; /* 形成BFC */
  }

  .son {
    width: 100px;
    height: 100px;
    background-color: blue;
    float: left;
    margin: 20px;
  }
</style>
<div class="father">
  <div class="son"></div>
</div>
复制代码

父元素高度有了！！！

解决和浮动元素重叠

  <style>
    .son-1 {
      width: 100px;
      height: 100px;
      background-color: red;
      float: left;
    }

    .son-2 {
      width: 200px;
      height: 200px;
      background-color: blue;
    }
  </style>
  <div class="father">
    <div class="son-1"></div>
    <div class="son-2"></div>
  </div>
复制代码

大家可以看到，son-1是浮动的元素，脱离了文档流，它和son-2是重叠在一起的；如果想让这两兄弟不重叠，那么就可以把son-2形成BFC,因为根据上面的规则BFC的区域不会与float的元素区域重叠,所以就会分开。

  <style>
    .son-1 {
      width: 100px;
      height: 100px;
      background-color: red;
      float: left;
    }

    .son-2 {
      overflow: hidden; /* 形成BFC */
      width: 200px;
      height: 200px;
      background-color: blue;
    }
  </style>
  <div class="father">
    <div class="son-1"></div>
    <div class="son-2"></div>
  </div>
复制代码