關于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)。