bfc 是box、formatting context的縮寫。
bfc 定義
bfc(block formatting context)直譯為"塊級格式化上下文"。它是乙個獨立的渲染區域，只有block-level box參與， 它規定了內部的block-level box如何布局，並且與這個區域外部毫不相干。
bfc布局規則：
內部的box會在垂直方向，乙個接乙個地放置。
box垂直方向的距離由margin決定。屬於同乙個bfc的兩個相鄰box的margin會發生重疊
每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格式化，否則相反)。即使存在浮動也是如此。
bfc的區域不會與float box重疊。
bfc就是頁面上的乙個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素。反之也如此。
計算bfc的高度時，浮動元素也參與計算
根元素float屬性不為none
position為absolute或fixed
display為inline-block, table-cell, table-caption, flex, inline-flex
overflow不為visible
BFC 神奇背後的原理
bfc 已經是乙個耳聽熟聞的詞語了，網上有許多關於 bfc 的文章，介紹了如何觸發 bfc 以及 bfc 的一些用處 如清浮動，防止 margin 重疊等 雖然我知道如何利用 bfc 解決這些問題，但當別人問我 bfc 是什麼，我還是不能很有底氣地解釋清楚。於是這兩天仔細閱讀了css2.1 spec...
前端精選文摘 BFC 神奇背後的原理
bfc 已經是乙個耳聽熟聞的詞語了，網上有許多關於 bfc 的文章，介紹了如何觸發 bfc 以及 bfc 的一些用處 如清浮動，防止 margin 重疊等 雖然我知道如何利用 bfc 解決這些問題，但當別人問我 bfc 是什麼，我還是不能很有底氣地解釋清楚。於是這兩天仔細閱讀了css2.1 spec...
前端精選文摘 BFC 神奇背後的原理
bfc 已經是乙個耳聽熟聞的詞語了，網上有許多關於 bfc 的文章，介紹了如何觸發 bfc 以及 bfc 的一些用處 如清浮動，防止 margin 重疊等 雖然我知道如何利用 bfc 解決這些問題，但當別人問我 bfc 是什麼，我還是不能很有底氣地解釋清楚。於是這兩天仔細閱讀了css2.1 spec...