BFC
BFC (Block Formatting Context)
我们经常遇到高度塌陷问题以及外边距合并问题，这些问题都是由于块级元素的布局规则导臃的。而BFC（块级格式化上下文）就是为了解决这些问题而提出的。 BFC是一个独立的布局环境，其中的元素布局是不受外部影响的，也不会影响外部元素的布局。
BFC的布局规则如下：
- 内部的盒子会在垂直方向上一个接一个放置。
- 盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻盒子的margin会发生重叠。
- BFC是一个独立的容器，内部的盒子不会影响外部的盒子。
- 计算BFC的高度时，浮动元素也会参与计算。
- BFC内部元素的左边与包含块的左边相接触，即使存在浮动元素也不会影响。