第 2 题：介绍下 BFC 及其应用。

[janessasmith]

BFC 就是块级格式上下文，是页面盒模型布局中的一种 CSS 渲染模式，相当于一个独立的容器，里面的元素和外部的元素相互不影响。

创建 BFC 的方式有：

1. html 元素；
2. float 不是none的元素；
3. position 不是 static 和 relative 的元素；
4. overflow 不为 visiable；
5. display: table-cell/inline-block 的元素。

BFC 主要的作用是：

1. 清除浮动；
2. 防止同一 BFC 容器中的相邻元素间的外边距重叠问题。

BFC 特性：

1. 内部box会在垂直方向，一个接一个地放置。
2. Box垂直方向的距离由margin决定，在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠；
3. 在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）；
4. 形成了BFC的区域不会与float box重叠；
5. 计算BFC高度时，浮动元素也参与计算。