关于BFC块级格式化上下文原理及触发条件

    这里首先就是了解什么是BFC了，。

    经常听到大神说什么清除浮动的原理之类的，什么BFC、FFC、IFC之类的。

    如果说上面三个词你一个也不懂，甚至都没听过，那就要好好关注我的博客了，之后会持续更新的。

    先来看看BFC是什么？

    BFC英文名字全称Block Formatting Context。

    关于全称这个东西，了解一下就可以了，但是看到要知道是什么，别一说到BFC你头头是道，问你Block Formatting Context是什么就一脸懵逼了。

    Block Formatting Context翻译过来就是：块级格式化上下文。

    写CSS样式时，对一个元素设置CSS，我们首先要知道这个元素是块级还是行内元素，而BFC就是用来格式化块级盒子的。

    它是指一个独立的块级渲染区域，只有块级盒子参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。

    BFC就是相当于一堵围墙，当你触发一个元素的BFC，那么就相当于在这个元素四周建立起一堵围墙，那么这时候围墙里面的元素和围墙外的元素就不会产生相互影响。

    BFC能解决很多问题：

    比较经典的就是当一个盒子的子元素全部都浮动的时候，那么这个盒子的高度将不会被子元素撑开。

    这是浮动所造成的高度塌陷问题。

    那么这时候如果我们出发这个盒子的BFC，那么就能解决这个问题。

    说了这么多，那么到底触发BFC的条件有哪些呢？

    这里我整理了一个列表，大家参考一下：

    1、根元素或其它包含它的元素；

    2、float的值不为none；

    3、overflow的值不为visible；

    4、position的值不为static；

    5、display的值为inline-block、table-cell、table-caption；

    6、flex boxes(元素的display：flex或inline-block)。