BFC 的概念
BFC 是一个容器，是一个独立的布局环境，决定了元素如何对其内容就行定位，以及与其他元素的关系和相互作用；BFC 中的子元素的布局不会受到外界的影响；
BFC 的布局规则：
1)、在 BFC 下，内部的 box 会在垂直方向，一个接一个的放置；
2)、Box 垂直方向的距离由 margin 决定；属于同一个 BFC 的两个相邻 Box 的 margin 会发生叠加；
3)、在 BFC 中，每一个盒子的左边缘 margin-left 会触碰到容器的左边缘 border-left ，即使存在浮动也会如此；
4)、BFC 的区域不会与 float box 重叠；
5)、计算 BFC 的高度，浮动元素也会参与计算；
触发 BFC 的条件：
1)、根元素即html；
2)、float 的值不为 none；
3)、overflow的值不为 visible；
4)、display的值为 inline-block、table-cell、table-caption；
5)、position 的值为 absolute 或 fixed；