一，可视化格式模型
盒子模型是CSS中元素产生的box的自身构成，就是我们平常所认知的包含边距、边框、内容的矩形区域。而可视化格式模型则是把这些box，按照规则摆放到页面上，也就是通常所说的布局。换句话说，可视化格式模型是整个页面的模型，这个模型规定了怎么在页面里摆放box，box相互作用等等，属于CSS的最为核心的概念之一。W3C标准的说法是，它规定了用户端（浏览器）在媒介（显示器）中如何处理文档树(document tree)。
在可视化格式模型中，每一个元素都会根据盒子模型产生0个或多个box，而这些box的布局受以下因素的影响：
● 1. box尺寸和类型
类型是指 display 特性所决定的元素类型，如：div 是块级元素，span 是行内元素等
● 2. 定位体系
元素在布局时，根据3种定位体系定位。分别是，常规流、浮动和绝对定位。
● 3. 在文档树中，元素之间的关系。
比如，一个块元素包含两个互为兄弟节点的浮动元素，后面那个浮动元素的布局，会受前面元素以及它包含块的影响。
● 4. 外部信息。
比如，可视窗口的大小，我们有时候会做页面自适应窗口大小的功能，就是因为，窗口大小对布局有影响。再如，图片的固有尺寸，会影响行内替换元素的尺寸，进而影响整个布局。
可视化格式模型（标准或者说规范），并不会规定所有格式的细节，用户端（浏览器）在处理本规范未包含的格式化情形时，表现可能会有所不同，在这部分，会涉及到很多新的概念：包含块，元素的类型，定位体系，块级格式化上下文（Block Formatting Contexts），行内格式化上下文(Inline Formatting Contexts)，浮动，绝对定位，z序，以及可视化格式模型的细节部分，自动宽度高度的计算。在这里我们主要阐述下BFC，IFC、GFC(GridLayout Formatting Contexts,网格布局格式化上下文)、FFC（Flex Formatting Contexts，自适应格式化上下文）后续再阐述。其中GFC、FFC是CSS3新增的概念。
二，格式化上下文（Formatting Contexts）
FC是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用，简单来说，FC就是一个决定如何渲染文档的容器。
盒子（Box）是CSS布局的对象和基本单位，可以这样说，一个页面就是由很多个Box组成的。元素的类型和dsiplay属性，决定了这个Box的类型，不同类型的Box，会参与不同的FC，因此Box内的元素会以不同的方式渲染。
三，块级格式化上下文（Block Formatting Contexts）
Block-level（块级盒子）会参与BFC，这里只是说参与，并不是所有都会。标准中是这么定义的：浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的块级格式化上下文。
BFC的主要特性：
● 1，内部的Box会在垂直方向，从顶部开始一个接一个地放置。
● 2，Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加
● 3，每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
● 4，BFC的区域不会与float box叠加。
● 5，BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
● 6，计算BFC的高度时，浮动元素也参与计算。
触发BFC的方式：
● 1，float 除了none以外的值
● 2，overflow 除了visible 以外的值（hidden，auto，scroll ）
● 3，display (table-cell，table-caption，inline-block, flex, inline-flex)
● 4，position值为（absolute，fixed）
● 5，fieldset元素
在以上的情况里可以创建BFC。
BFC应用场景：
1，解决margin叠加问题
每个p之间的距离为50px，发生了外边距叠加，这是因为属于同一个BFC的两个相邻Box的margin会发生叠加，解决这个问题的方法是给p新加一个父元素，让它触发BFC。
2，用于布局
元素的左外边距会触碰到包含块容器的左外边框，就算存在浮动也会如此。BFC不会与浮动盒子叠加，因此我们可以创建一个新的BFC来解决这个问题，如下图设置类名为main的元素的overflow来触发它的BFC。
3，用于清除浮动，计算BFC高度。
我们发现由于里面两个子元素浮动的关系，两个box已经脱离了父元素的包含块，父元素高度已经塌陷，我们需要让父元素包含两个box子元素，这样计算高度时，两个浮动子元素就会参与，所以我们要闭合浮动，触发父元素的BFC，浮动元素也会参与计算。
可以结合BFC，解决其他场景的相关问题，这里就不一一列举了。
参考链接：
