BFC（Block Formatting Context）块级格式上下文

       在页面渲染中，每个元素都被定义为一个盒模型，盒子的布局会受到尺寸，定位，盒子的子元素或兄弟元素，视口的尺寸等因素决定，所以这里有一个浏览器计算的过程，计算的规则就是由一个叫做视觉格式化模型的东西所定义的，BFC 就是来自这个概念，它是 CSS 视觉渲染的一部分，用于决定块级盒的布局及浮动相互影响范围的一个区域。

BFC的创建：

• 绝对定位，position 设置为 absolute 或 fixed
• overflow 设置不是 visible
• 浮动元素，float 设置不是 none
• 行内块元素，display 为 inline-block
• flex 元素

BFC特性：

• 块级元素会在垂直方向一个接一个的排列，和文档流的排列方式一致。
• 在 BFC 中上下相邻的两个容器的 margin  会重叠，创建新的 BFC 可以避免外边距重叠。
• 计算 BFC 的高度时，需要计算浮动元素的高度。
• BFC 区域不会与浮动的容器发生重叠。
• BFC 是独立的容器，容器内部元素不会影响外部元素（形成独立的渲染区域，内部元素的渲染不会影响外界）。
• 每个元素的左 margin  值和容器的左 border  相接触。

可解决问题：

• 盒子的高度塌陷问题
• 浮动元素覆盖问题
• margin重叠问题