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的高度時，浮動元素也參與計算
如何建立乙個bfc：
根元素float屬性不為none
position為absolute或fixed
display為inline-block, table-cell, table-caption, flex, inline-flex
overflow不為visible
使用場景：
清浮動，防止 margin 重疊
最後推薦乙個介紹bfc很詳細的文章，附帶了淺顯易懂的示例：
邊距重疊與BFC
邊界重疊是指兩個或多個盒子 可能相鄰也可能巢狀 的相鄰邊界 其間沒有任何非空內容 補白 邊框 重合在一起而形成乙個單一邊界。兩個或多個塊級盒子的垂直相鄰邊界會重合，它們的邊界寬度是相鄰邊界寬度中的最大值。注意水平邊界是不會重合的。父子元素的邊界重疊 以為期待的效果 而實際上效果如下 在這裡父元素的高...
詳解css邊距重疊的幾種解決方案
今天整理了一下用css防止邊距重疊的幾種方法 先假設一組dom結構 www.cppcns.coment 程式設計客棧 通常情況下，如果給子元素設定margin,就會產生這個屬性對父元素也產生了同樣的效果，然而 這其實不是我們想要的結果，我們只想對子元素設定margin，那麼現在我們應該怎麼做呢？1 ...
margin塌陷（又叫邊距重疊效應） BFC
問題 有時當我們設定子元素的margin top，但是卻發現子元素沒有出現上外邊距的效果，反而是父元素出現了上外邊距的效果。第乙個子元素設定margin top父元素會跟著移動 原因 邊距重疊 乙個盒子和其子孫的邊距重疊。根據規範，乙個盒子如果沒有上補白和上邊框，那麼它的上邊距應該和其文件流中的第乙...