關於BFC的一些應用

關於Block Formatting Context(BFC)的概念性介紹就不贅述了，網上有不少關於此的介紹，後面也羅列了些我的認爲很不錯的文摘。

那今天要說的是關於它的一些技巧性應用，經過示範比較常會接觸到的排版佈局方面的需求來講明下。

BFC實例

左中右佈局的自動擴容

這是一個比較常見的佈局需求，以下，這是一個表單裏面的其中一行，想下怎麼排呢？

好了，這時候需求有變更了，還須要增長些東西，就變成了這樣：

唔，這會看到後面發現，還有這樣子的：

雖然，有其餘辦法來實現這樣的效果，那是否有更輕巧的實現方式呢？那就是BFC啦，經過BFC能夠實現自動擴容的效果，就是你怎麼加都行（點這裏看線上例子）。

複雜背景下的目錄線實現

這個，看着是否是特別的熟悉：

這種類word的目錄結構，腦海裏已經將它切好了。按照一般的作法是，背景純色背景，那標題文字直接應用同色背景便可，簡單快捷方便。

不過，看到下面的是否是要悲劇了，點這裏能夠看線上的：

這種就不僅僅只是填個背景了~~你想到什麼更好的辦法來處理了嗎？

這裏拋出多一個問題，直接上圖，看下面的圖：

有沒注意到後面多出來的類橙色的一截，這截東西是什麼？（Chrome下能夠inspect到，Firefox沒有）

這個多餘的東西加上線的長度就等於父級的寬度（這個線沒有設置width，且爲block level的元素）

這是在《CSS權威指南》一書，第7章節水平格式化這一小節的時候瞭解到的。

潛在問題

• 不是全部東西都是完美的，BFC也不例外，在提供了輕巧靈活的排版佈局的同時，也帶了較大的潛在問題，那就是overflow了，都知道這個屬性的反作用，超出範圍裁減，也就是實現BFC的時候，要考慮到若是有絕對定位或者須要經過偏移調整位置實現特殊效果的需求，那麼這會個很頭疼的問題。

• 對於結構有一點要求，觸發的元素必須位於最後一位。

參考連接

• 前端精選文摘：BFC 神奇背後的原理

• 深刻理解BFC和Margin Collapse

• 那些年咱們一塊兒清除過的浮動

• 什麼是BFC

• 說說標準