BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

BFC布局规则：

• 内部的Box会在垂直方向，一个接一个地放置。
• Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
  每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
• BFC的区域不会与float box重叠。
• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
• 计算BFC的高度时，浮动元素也参与计算

BFC触发条件

• 根元素
• float属性不为none
• position为absolute或fixed
• display为inline-block, table-cell, table-caption, flex, inline-flex
• overflow不为visible

常见的使用场景

1、清除浮动

BFC规则：计算BFC的高度时，浮动元素也参与计算
所以当元素内部有浮动元素，无法撑起父元素时，可以触发父元素生成BFC，这样父元素内部的浮动子元素就可以撑起父元素

2、防止相邻元素垂直方向上margin重叠

BFC规则：Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
那么不同BFC元素的margin便不会发生重叠；所以当当前元素和垂直方向相邻元素的margin重叠时，可以出发当前元素BFC，这样问题就解决了

参考

BFC神奇背后的原理

浏览器环境

Task & Microtask

1. Task按顺序执行。在task之间，浏览器可以更新渲染。
2. Mircotask执行时机：每个task执行后，会先清空Microtask队列，然后才调用新的task。
3. 场景：
   • Task: setTimeout, setInterval, 事件处理程序，解析
   • Microtask: Promise, MutationObserve，await/async

async & await

使用await调用一个async函数时，会添加一个Microtask。await的内容执行完后，再次添加一个Mictrotask执行后续的代码。

async/await是一个Promise语法糖。对比以下代码：

async function async1() {
	console.log('1')
	await async2()
	console.log('2')
}
async function async2() {
	console.log('3')
}
async1();

// 上面的代码约等于：
function async1() {
	console.log('1');
	new Promise((resolve, reject) => {
		console.log('3');
		resolve();
	}).then(() => {

		Promise.resolve().then(() => {
			console.log('2');
		})
	})
}
async1();

第二段代码中，async声明的函数被包了一层Promise。await之后的代码也被包了一层Promise，放在前一个Promise的then()回调中。

如果await后面的代码不是async函数会怎样？对比下边一段代码：

async function async1() {
	console.log('1')
	await console.log(3);
	console.log('2')
}
async1();

// 约等于：
function async1() {
	console.log('1');
	console.log('3');
	Promise.resolve().then(() => {
		console.log('2');
	})
}
async1();

node环境

node中事件循环过程：

node中每一次事件循环都要完成以下几个处理阶段，每个阶段都有一个FIFO队列。microtask队列在这些阶段之间处理。

• 定时器(timers)：本阶段执行已经安排的 setTimeout() 和 setInterval() 的回调函数。
• 待定回调(pending callback)：上一轮循环中有少数的I/Ocallback会被延迟到这一轮的这一阶段执行。
• idle, prepare：队列的移动，仅内部使用。
• 轮询（poll）：最为重要的阶段，执行I/O callback，在适当的条件下会阻塞在这个阶段。
• 检测(check)：setImmediate() 回调函数在这里执行。
• 关闭的回调函数(close callback)：一些准备关闭的回调函数，如：socket.on(‘close’, ...)

与浏览器不同，node在处理每个阶段的task（宏任务）队列时，会一次性清空队列中的所有任务。然后才转入nextTick队列和MicroTask队列的处理。

Event loop  begin:
第1阶段（timer):
  -  执行timer队列中的所有task
  -  执行nextTick队列中所有的任务（执行过程中注册的nextTick任务会添加到当前队列并执行）
  -  执行microtask队列中所有的任务（执行过程中注册的微任务任务会添加到当前队列并执行）
第2-6阶段同上；
...next loop

常见执行顺序判断

1. setTimeout(fn,0) vs. setImmediate(fn)

   setTimeout在循环的timer阶段（第一阶段）执行，setImmediate在check阶段（第五阶段）执行。因此setTimeout(fn,0)总是比setImmediate(fn)先执行。

2. nextTick vs. MicroTask

   nextTick会在当前task调用栈执行完后立刻执行。意即nextTick队列的执行总是在MicroTask队列的前边。