BFC
BFC（Block Formatting Contexts），块级格式化上下文
盒模型
CSS 盒模型描述了通过 文档树中的元素 以及相应的 视觉格式化模型 所生成的矩形盒子。简单来说，盒模型定义了一个 矩形盒子，当我们需要对文档进行布局时，浏览器的渲染引擎就会根据盒模型，将所有元素表示为一个个矩形的盒子，盒子的外观由 CSS 决定。
一个标准的盒子由四个部分组成，由内向外分别为：内容，内边距，边框，外边距：
标准的盒模型中，内容区域的大小可以明确地通过width，min-width，max-width，height，min-height，max-height控制，也就是说，通过CSS设置的元素宽高只是包含内容区域。你可能听说过怪异盒模型，这种盒模型最早在IE浏览器中出现，也叫IE盒模型，box-sizing属性值为border-box时，元素会呈现怪异盒模型，此时，元素的宽高包含了内容，内边距和边框。
视觉格式化模型
CSS视觉格式化模型描述了盒子是怎样生成的，简单来说，它定义了盒子生成的计算规则，通过规则将文档元素转换为一个个盒子。
每个盒子的布局由尺寸，类型，定位，盒子的子元素或兄弟元素，视口的尺寸和位置等因素决定。
视觉格式化模型的计算，取决于一个矩形的边界，这个边界，就是包含块( containing block )：
上述代码中，table和tr都是包含块，table是tr的包含块，同时tr又是td的包含块。
盒子不受包含块的限制，当盒子的布局跑到包含块的外面时，就是我们说的溢出（overflow）。
视觉格式化模型定义了盒（Box）的生成，其中的盒主要包括了块级盒,行内盒和匿名盒。
块级元素
CSS 属性值 display 为 block，list-item，table 的元素。
块级盒
块级盒具有以下特性：
CSS属性值display为block，list-item，table时，它就是块级元素
视觉上，块级盒呈现为竖直排列的块
每个块级盒都会参与BFC的创建
每个块级元素都会至少生成一个块级盒，称为主块级盒；一些元素可能会生成额外的块级盒，比如
行内级元素
CSS 属性值 display 为 inline，inline-block，inline-table 的元素。
行内盒
行内盒具有以下特性：
CSS属性值display为inline，inline-block，inline-table时，它就是行内级元素
视觉上，行内盒与其他行内级元素排列为多行
所有的可替换元素（display值为inline，如，