前端面试——BFC相关问题翻译：块格式化上下文包含创建它的元素内部的所有内容，这些内容不包含在创建新的块格式化上下文的后

前言

最近在看前端面试相关的内容，顺便对有些内容做个整理这篇也是参照了两位大佬的内容：

1.三元博客 2.学习 BFC (Block Formatting Context)

什么是BFC

MDN中是这样解释的：

BFC(Block Formatting Context):

A block formatting context contains everything inside of the element creating it that is not also inside a descendant element that creates a new block formatting context.

翻译：块格式化上下文包含创建它的元素内部的所有内容，这些内容不包含在创建新的块格式化上下文的后代元素内部。

<div class='box1 BFC'>
  <div class='box2'> </div>
  <div class='box3 BFC'>
      <div class='little'></div>
      <div class='little'></div>
  </div>
   <div class='box4'>
      <div class='box5'></div>
   </div>
</div>

box1是一个BFC，那么该块格式上下文包含box2、box3、box4、box5,因为box3是一个新的块格式上下文，所以其后代元素不包含在box1的块格式上下文中

BFC的创建方法/触发条件

根元素
浮动元素（float不为none）
绝对定位（position为absolute/fixed）
overflow 值不为 visible 的块元素
弹性盒 flex boxes (元素的display: flex或inline-flex)
网格元素（display为 grid 或 inline-grid 元素的直接子元素）等等
display: inline-block / table-caption / table-cell

BFC渲染规则

BFC是一个独立的容器，里外元素不会相互影响
计算BFC的高度的时候浮动元素也要参与计算
内部的盒会一个接一个的垂直放置

BFC的作用

1.防止浮动导致父元素高度坍塌

//这里借用三元大佬的例子
<style>
  .container {
    border: 10px solid red;
  }
  .inner {
    background: #08BDEB;
    height: 100px;
    width: 100px;
  }
</style>

<body>
  <div class="container">
    <div class="inner"></div>
  </div>
</body>

将inner元素设置为浮动

  .inner {
    float: left;
    background: #08BDEB;
    height: 100px;
    width: 100px;
  }

这时如果我们对父元素设置BFC后, 这样的问题就解决了:

.container {
    border: 10px solid red;
    overflow: hidden;
}

2.避免外边距重叠

<div class='box1'>
      <div class='box2'></div>
      <div class='box2'></div>
      <div class='box2'></div>
  </div>
  <style>
        * {
        margin: 0;
        padding: 0;
    }
    .box1 {
      width: 300px;
      height: 300px;
      overflow: hidden;
      background-color: black;
    }
    .box2 {
      margin: 10px;
      width: 50px;
      height: 50px;
      background-color: green;
    }
</style>

可以看到三个box2之间的距离都是10px，因为它们同处于一个BFC中，就造成了外边距重叠怎么解决呢？我们对box2用一个BFC包裹起来

  <div class='box1'>
      <div class='box2'></div>
      <div class="container">
        <div class='box2'></div>
      </div>
      <div class='box2'></div>
  </div>
  <style>
        * {
        margin: 0;
        padding: 0;
    }
    .box1 {
      width: 300px;
      height: 300px;
      overflow: hidden;
      background-color: black;
    }
    .box2 {
      margin: 10px;
      width: 50px;
      height: 50px;
      background-color: green;
    }
    .container {
      overflow: hidden;
    }

这样就完美啦！