Formatting Context

Formatting Context：是页面中的一块渲染区域，并且有一套渲染规则来决定其子元素将如何定位，以及和其他元素的关系和相互作用

常见的Formatting Context有：Block Formatting Context（规定了一个区域中常规流块盒的布局）和Inline Formatting Context（规定了一个区域中常规流行盒的布局）

什么是BFC

BFC是Block Formatting Context（块级格式化上下文）
它是一块独立的渲染区域，规定了该区域中，常规流块盒的布局

BFC的布局规则

1. 其常规流块盒在包含块的垂直方向上依次摆放
2. 每个常规流块盒垂直方向的距离是由margin决定的，但属于同一个BFC的两个相邻常规流块盒的margin会发生重叠（margin合并）

3. 常规流块盒在水平方向上，必须撑满包含块
4. BFC的区域不会与浮动的盒子区域重叠

5. BFC就相当于是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此
6. 计算BFC的高度时，浮动元素也会参与计算
7. 每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此
  （即使存在浮动元素，BFC中其他元素的margin box的左边也会与包含块border box的左边相接触）
8. 不同的BFC区域，他进行渲染时互不干扰

BFC的创建

1. float的属性值不为none（就相当于是浮动的元素）
2. position的属性值不为static或relative（就相当于是绝对定位的元素）
3. overflow的属性值不为visible
4. display的属性值为inline-block，table-cell，flex，table-caption或inline-flex
5. html根元素

副作用最小的创建方式：overflow：hidden

BFC的作用

1. 利用BFC避免margin的重叠

2. 自适应两栏布局

3. 清除浮动