什麼是BFC

今天面試中，面試官問了一個問題，什麼是BFC ?當時腦殼是一片空白，不知道說的是什麼，後來回家在網上一查 ，發現BFC 英文解釋： block formatting context。

中文意思：塊級格式化上下文。formatting context 意思是 頁面中一個渲染區域，有本身的一套渲染規則，決定其子元素如何定位，以及和其餘兄弟元素的關係和做用。

BFC 最大的一個做用就是 在頁面上有一個獨立隔離容器，容器內的元素 和 容器 外的元素佈局不會相互影響。

舉個例子：兩個 div 盒子上下排列，當它們都設 margin : 20px; 時，默認時，上下兩個盒子 的 margin 在豎直方向會重疊，爲何？由於它們的每一個div 都沒有 起到

BFC 的做用。此時它們是互相拉扯着。其實 咱們能夠想到 在這裏應該有個:root 根元素有BFC 做用，但惋惜的是，：root根元素只能對和他最近的第一個子元素起到

BFC的做用，因此就結果來看，是沒有做用的。那麼怎麼辦？其實 能夠在每一個div 外面再套一個div啊， 把兩個外套 div {overflow:hidden;} 設這個樣式，固然也可能

能夠設其餘樣式的值，小編在這裏就沒有深刻研究了。之後有更新的再告訴大家哦。~~ 兩個外套 div 就有了 BFC 的做用了，說穿了，BFC 就像一堵牆同樣，把兩個盒

子隔斷，使盒子之間不會有任何互相的影響。有人會問爲何 外套 div 設 {overflow:hidden;} 樣式會有BFC 的做用，接下來就說說 那些css 屬性能夠起到 BFC 的做

用。但願和各位讀者一塊兒共勉。

產生BFC 做用的css 屬性有：float 除了none之外的值，overflow 除了visible 之外的值（hidden，auto，scroll ），

display (table-cell，table-caption，inline-block, flex, inline-flex)

position值爲（absolute，fixed） 這些屬性值得元素都會自動建立 BFC，至於BFC 的一些其餘做用，在實際工做中，用的很少，就算有些做用不知道，可能無形中也可

能用到了，這裏筆者只說重點，謝謝你們的閱讀。

固然還有一些 IFC FFC 等，用的不多，不予追究。

這是筆者第一次寫博客，不到之處，敬請諒解。也但願你們多多關注。之後會時不時地有新的東西更新，但願和你們一塊兒

欣賞，共勉。在這裏因爲筆者經驗有限，所寫的內容其實還有不少改進之處，就這篇博客而言，它其實並無起到一個畫龍點睛的做用，不能突出重點，不能在第一時間讓

讀者明白BFC 的真正含義，我以爲一篇文章的好壞，1 要有一個畫龍點睛的號標題，2 文字中要重點突出，用生活中最簡單的比喻，讓讀者在最少的時間內立刻找到本身想

要的答案。只有清晰簡單的比喻，才能通俗易懂，越簡單，越明瞭，詞語越通俗易懂，越簡潔，越好。3 只需說經常使用的，對於不經常使用的，沒必要說，浪費時間。世上萬物，何其

不有，聽之不盡，言之不完。謝謝你們。