BFC和IFC

BFC（边距重叠解决方案）

BFC: 块级格式化上下文
BFC基本概念：BFC是CSS布局的一个概念，是一块独立的渲染区域，是一个环境，里面的元素不会影响到外部的元素。
父子元素和兄弟元素边距重叠，重叠原则取最大值。空元素的边距重叠是取margin与 padding 的最大值。

BFC原理（渲染规则|布局规则）：

（1）内部的Box会在垂直方向，从顶部开始一个接着一个地放置；
（2）Box垂直方向的距离由margin(外边距)决定，属于同一个BFC的两个相邻Box的margin会发生重叠；
（3）每个元素的margin Box的左边，与包含块border Box的左边相接触，（对于从左到右的格式化，否则相反）。即使存在浮动也是如此；
（4）BFC 在页面上是一个隔离的独立容器，外面的元素不会影响里面的元素，反之亦然。文字环绕效果，设置float；
（5）BFC 的区域不会与float Box重叠（清浮动）;
（6）计算BFC的高度时，浮动元素也参与计算。

CSS在什么情况下会创建出BFC（即脱离文档流）

1、根元素，即 HTML 元素（最大的一个BFC）
2、浮动（float 的值不为 none）
3、绝对定位元素（position 的值为 absolute 或 fixed）
4、行内块（display 为 inline-block）
5、表格单元（display 为 table、table-cell、table-caption、inline-block 等 HTML 表格相关的属性)
6、弹性盒（display 为 flex 或 inline-flex）
7、默认值。内容不会被修剪，会呈现在元素框之外（overflow 不为 visible）

BFC作用（使用场景）

1、自适应两（三）栏布局（避免多列布局由于宽度计算四舍五入而自动换行）
2、避免元素被浮动元素覆盖
3、可以让父元素的高度包含子浮动元素，清除内部浮动（原理：触发父div的BFC属性，使下面的子div都处在父div的同一个BFC区域之内）
4、去除边距重叠现象，分属于不同的BFC时，可以阻止margin重叠
IFC

IFC: 行内格式化上下文
IFC基本概念：

IFC原理（渲染规则|布局规则）：

（1）内部的Box会在水平方向，从含块的顶部开始一个接着一个地放置；
（2）这些Box之间的水平方向的margin，border和padding都有效；
（3）Box垂直对齐方式：以它们的底部、顶部对齐，或以它们里面的文本的基线（baseline）对齐（默认，文本与图片对其），例：line-heigth与vertical-align。