# 1、BFC

BFC（Block Formatting Context）格式化上下文，是 Web 页面中盒模型布局的 CSS 渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。

特性： 内部 box 在垂直方向依次排列，其距离有 margin 决定，不与 float 浮动的元素区域重叠，且 BFC 在页面上属于一个不受外界干扰也不干扰外界的盒子。

应用： 主要防止 margin 坍塌，清除内部浮动。

触发条件：

（1）、该元素是根元素
（2）、float 的值不为 none
（3）、overflow 的值不为 visible
（4）、display 的值为 inline-block、table-cell、table-caption
（5）、position 的值为 absolute 或 fixed

# 2、关于 CSS 加载阻碍问题

原理解析
结构层（Html）和表现层（Css）、行为层（Js）
根据 webkit 和 gecko 浏览器渲染测试结果表明 从上面两个流程图我们可以看出来，浏览器渲染的流程如下：

1、HTML 解析文件，生成 DOM Tree，解析 CSS 文件生成 CSSOM Tree
2、将 Dom Tree 和 CSSOM Tree 结合，生成 Render Tree(渲染树)
3、根据 Render Tree 渲染绘制，将像素渲染到屏幕上。

所以我们得出了

1.css 加载不会阻塞 DOM 树的解析
2.css 加载会阻塞 DOM 树的渲染
3.css 加载会阻塞后面 js 语句的执行

机制分析
CSS 加载阻碍机制其实是一种优化机制
原因：

加载 css 的时候，可能会修改下面 DOM 节点的样式，如果 css 加载不阻塞 DOM 树渲染的话，那么当 css 加载完之后，DOM 树可能又得重新重绘或者回流了，这就造成了一些没有必要的损耗