BFC
    BFC是块级格式化上下文的简写，是一个独立的区域，内部元素的布局不受外部的影响，也不会影响外部。
    BFC常常帮助我们解决开发中遇到的 外边距溢出、外边距合并、高度塌陷等问题。原理就是使他们触发BFC，创建一个自己独立的容器。

    外边距溢出：指的是给一个子元素设置margin值，如果子元素紧紧沿着父盒子的上边缘，那么子元素设置的margin值会传递给父元素。
    解决方法：

    1. 可以给父元素设置 overflow: hidden
    2. 给父元素设置 border-top
    3. 给父元素设置 padding-top
    4. 最好的办法是借助 伪元素 ::before，给父元素的 before 伪元素设置 content: ‘’; display: table.

    外边距合并：垂直方向上排列的两个兄弟元素，给他们设置各自的 margin 值，此时它们的外边距会按照最大的那个元素设置的margin值算，不会进行累加。
    解决方案：

    1. 给子元素设置 display: inline-block
    2. 给子元素设置 float: left
    3. 可以给子元素在嵌套一层父元素
    4. 核心就是使兄弟元素不在同一个BFC区域下面，将兄弟元素分别触发BFC或者将兄弟元素包在不同的div下，这些不同的div再分别触发BFC。

    高度塌陷：一个父元素，一个子元素，父元素不设置高度，内容靠子元素撑开，如果给子元素设置 float，此时父元素高度为 0
    解决方案：

    1. 给父元素设置 高度
    2. 给父元素设置浮动
    3. 推荐使用给父元素设置伪元素，设置 ::before，设置 content: ‘’; display: block; clear: both;

    触发BFC的条件

    1. 浮动元素 float 不设置为 none
    2. overflow 不为 visible
    3. position 为 absolute 或 fixed
    4. display: inline-block，flex，table-cell

    BFC渲染规则

    1. 内部的盒子会在垂直方向上，一个接着一个的排列
    2. 计算BFC高度的时候，浮动元素也会参与计算
    3. 盒子垂直方向上的距离由margin值决定，属于同一个BFC的两个相邻盒子的margin会发生合并
    4. BFC的区域不会与float元素的区域发生重叠
    5. BFC就是页面上的一个独立的容器，内部元素的如何渲染不会影响到外面元素，反之亦然

    IFC
    内联格式化上下文，触发条件是一个块级元素内部只包含内联元素。
    应用场景：

    1. 触发一个IFC，给内部内联元素设置 vertical-align:middle，这样该父元素下面的其它内联子元素也会垂直居中
    2. 触发一个IFC，给其设置 text-align:center，可以控制内部元素水平居中