BFC（Block Formatting Context）即格式化上下文，既不是一个CSS属性，也不是一段代码，是CSS2.1规范中的一个概念。
决定元素的内容如何渲染以及与其他元素的关系和交互。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

BFC五条规则：

1.BFC有隔离作用，内部元素不会受外部元素的影响。
2.一个元素只能存在于BFC中。
3.BFC内元素按正常流排列，元素之间的间隙由元素的外边距控制。
4.BFC中的内容不会与外面浮动的元素重叠。
5.计算BFC的高度，需要包括BFC内浮动子元素的高度。

如何创建BFC：

  • 1、float的值不是none。 有浮动
  • 2、position的值不是static或者relative。 不是静态和绝对定位
  • 3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex 
  • 4、overflow的值不是visible 存在溢出
作用：
1.避免margin重叠
2.两栏自适应布局，BFC区域不会与float box 重叠
3.用来清除浮动
具体参考：https://blog.csdn.net/sinat_36422236/article/details/88763187