BFC & IFC

BFC是w3c css2的一个规范概念：规定了子元素如何定位，以及和其他子元素的关系和项目作用
是一个独立的布局环境，不受外界影响，在一个BFC中，所有块盒和行盒都是垂直沿着父元素边框排列的；

规则：
垂直方向的距离有margin决定，同一个BFC里的盒子相邻的margin会重叠

BFC 指的是块级格式化上下文，一个元素形成了 BFC 之后，那么它内部元素产生的布局不会 影响到外部元素，外部元素的布局也 不会影响到 BFC 中的内部元素。一个 BFC 就像是一个隔离区域，和其他区域互不影响。 一般来说根元素是一个 BFC 区域，浮动和绝对定位的元素也会形成 BFC，display 属性的值为 inline-block、flex 这些 属性时也会创建 BFC。还有就是元素的 overflow 的值不为 visible 时都会创建 BFC。

如何形成BFC：
1.overflow != visible
2.position != static || position != relative
3.float != none
4.display的值是inline-block、table-cell、flex、table-caption或者inline-flex;

IFC 指的是行级格式化上下文，它有这样的一些布局规则：
（1）行级上下文内部的盒子会在水平方向，一个接一个地放置。
（2）当一行不够的时候会自动切换到下一行。
（3）行级上下文的高度由内部最高的内联盒子的高度决定。