初识css中的BFC：块级格式化上下文

刷面试题的时候，看到BFC 完全懵逼了，第一次接触这个概念。用了css 也有半年了，美化了那么多页面，搜索了一下，原来我们已经用它解决过好多问题了，原来他也是有专业的名字的。

概念：块级格式化上下文：block formatting context 的定义

（W3C CSS 2.1 规范中的一个概念,它是一个独立容器，决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。）
一个页面是由很多个 Box 组成的,元素的类型和 display 属性,决定了这个 Box 的类型。
不同类型的 Box,会参与不同的 Formatting Context（决定如何渲染文档的容器）,因此Box内的元素会以不同的方式渲染,也就是说BFC内部的元素和外部的元素不会互相影响。（来源菜鸟教程）

Box、Formatting Context的概念。

1. Box: CSS布局的基本单位
   　　Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。 不同类型的 Box， 会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。让我们看看有哪些盒子：

• 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；
  
  

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

一、BFC的布局规则

1. 内部的盒子会在垂直方向，一个一个地放置
2. BFC是页面上的一个隔离的独立容器
3. 属于同一个BFC的两个相邻Box的上下margin会发生重叠
4. 计算BFC的高度时，浮动元素也要参与计算
5. 每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此
6. BFC的区域不会与float重叠

二、哪些元素会生成BFC

1. 根元素或包含根元素的元素，即body根元素。
2. 浮动元素，即float属性值不为none（元素的position为absolute或fixed）。
3. 行内块元素（元素的display为inline-block）。
4. 表格单元格（元素的display为table-cell，HTML表格单元格默认为该值）。
5. 表格标题（元素的display为table-caption，HTML表格标题默认为该值）。
6. 匿名表格单元格元素(或者元素的display为table、table-row、table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或inline-table)。
7. overflow的值不为visible的元素。
8. display值为flow-root`的元素。
9. contain值为layout、content或strict`的元素。
10. 弹性元素(display为flex或inline-flex元素的直接子元素)。
11. 网格元素(display为grid或inline-grid元素的直接子元素)。
12. 多列容器（元素的colunm-count或column-width不为auto，包括column-count为1）。
13. column-span为all的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器当中。

三、 BFC的作用和原理

1. 自适应2栏布局
2. 清除内部浮动
3. 防止垂直 margin 重叠