初学BFC，感觉理解有点困难，现在简单分析一下BFC
BFC (Block Formatting Context) 块级格式化上下文
是一个环境，一个隔离的独立容器，与布局相关，写了 html 标签他就已经是一个 BFC 环境了。给其余的 box 设置 BFC 环境就是为了让它成为一个独立的空间。表现原则为：内部子元素再怎么翻江倒海都不会影响外部的元素，反之如此。避免margin穿透啊、清除浮动什么的。
box 是 CSS 布局的对象和基本单位，直观来说就是一个页面由很多个 box 组成，元素的类型和 display 属性决定了这个 box 的类型，不同类型的 box 会参与不同的 formatting context
display 为 block、list-item、table 的元素会生成 block-level box 并且参与BFC；
display 为 inline、inline-block、inline-table 的元素会生成 inline-level-box 并且参与IFC；
formatting context 是 W3C CSS2.1 规范里的一个概念。它是页面中的一块渲染区域，并且有一套规则，它规定了其子元素将如何定位，以及和其他元素的关系和相互作用。
CSS2.1 中只有 BFC 和 IFC, CSS3 中还增加了 GFC 和 FFC。
BFC布局规则：
1. 内部的 box 会在垂直方向一个接一个放置
2. box 垂直方向的距离由 margin 决定，属于同一个 BFC 的2个相邻 box 的 margin 会重叠
3. 每个元素的 margin box 的左边与包含块 border box 的左边相接触（对于从左往右的格式化，否则相反）即使浮动也是如此
4. BFC 的区域不会与 float box 重叠
5. BFC 就是页面上的一个隔离的独立容器，容器里的子元素与外界无关不会相互影响
6. 计算 BFC 高度时，浮动元素也参与计算
何时会触发bfc呢：常见的如下：
1. 根元素
2. float;
3. overflow: auto、scroll、hidden;
4. display: table-cell、table-caption、inline-block、flex、inline-flex;
5. position:absolut、fixed;