BFC块级格式上下文（Block Formating-context）

写在前面

        本文来自对各个博主文章的摘录，如有侵权请联系删除。

BOX

        Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。不同类型的 Box， 会参与不同的 Formatting Context 进而决定如何渲染这个盒子。

        盒子一共有如下种类：

• block-level box:display 属性为 block, list-item, table 的元素，会生成 block-level box。并且参与 block fomatting context；

• inline-level box:display 属性为 inline, inline-block, inline-table 的元素，会生成 inline-level box。并且参与 inline formatting context；

Formatting Context

        Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。

BFC主要观念

        每一个BFC区域只包括其子元素，不包括其子元素的子元素。(这1点比较容易理解)

        每一个BFC区域都是独立隔绝的,互不影响!

触发BFC

1. float的值不为none
2. overflow的值不为visible
3. display的值为table-cell、tabble-caption和inline-block之一
4. position的值不为static或则releative中的任何一个

BFC特点

1. 在同一个bfc区域，内部盒子总是垂直排列（body元素是一个bfc，所以body元素内的盒子都是竖直排列的，不是吗？）

2. 在同一个bfc区域,内部盒子垂直方向上的距离由marging决定，相邻两个box的margin值会发生重叠（这也就是margin塌陷问题了。）

3. BFC区域内部box的左边margin与BFC区域左边border相接触（如果是从右往左格式化则相反，即使浮动也是一样（就是说子bfc元素默认是和父bfc元素的左border相接触，参考每个div盒子都是从左向右排列）

4. 在同一个bfc区域内的每个bfc盒子不会重叠，即使设置float属性也一样，但设置浮动会使子元素水平排列，但仍然不会重叠

5. BFC是页面上的一个独立容器，容器内外布局不会相互影响

6. 计算BFC高度时，区域内的浮动元素会参与计算（解决了父盒子高度塌陷问题，可以用来清除浮动）