什么是BFC？它的作用是什么以及怎么创建BFC区域

啥是BFC

看不明白的定义：

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

官方文档到中是这么介绍的：

一个BFC区域包含创建该上下文元素的所有子元素，但是不包括创建了新的BFC的子元素的内部元素，BFC是一块块独立的渲染区域，可以将BFC看成是元素的一种属性，拥有了这种属性的元素就会使他的子元素与世隔绝，不会影响到外部其他元素。

代码理解

还不是很清楚什么意思？上代码！

<body>
    <div class="father" id="father">
      <div class="1"></div>
      <div class="1"></div>
      <div class="1"></div>
      <div class="1" id="son">
        <div class="2"></div>
        <div class="2"></div>
        <div class="2"></div>
      </div>
    </div>
  </body>

假设father和son盒子都是BFC区域
id=”father”这个BFC区域包含了所有 class=”1”的盒子但不包含class=”2”的盒子
id=”son”的这个BFC区域则包含了所以class=”2”的盒子。
那么总结下来可以得到如下结论：
1.每一个BFC区域只包括它的子元素，并不包括子元素的子元素。
2.每个BFC区域都是独立隔绝开来的，互相不会受到影响。