關於BFC的簡單理解

BFC介紹

BFC官方定義：塊格式化上下文，它是Web頁面的可視化CSS渲染的一部分。具體功能相似與一種官方定義的特殊的css屬性，這種屬性是不可更改的。

BFC規則

BFC的一系列做用，好比經常使用的清除浮動，取消margin合併等等這些做用得以實現，是由於BFC的一些規則。它的規則以下：

• 【1】內部的Box會在垂直方向，一個接一個地放置。
• 【2】Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊
• 【3】每一個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格化，不然相反)。即便存在浮動也是如此。
• 【4】BFC的區域不會與float box重疊。
• 【5】BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此。
• 【6】計算BFC的高度時，浮動元素也參與計算

BFC生成方式

• 該元素是根元素或包含根元素
• float的值不爲none
• overflow的值不爲visible
• display的值爲inline-block、table-cell、table-caption
• position的值爲absolute或fixed

規則運用：清除浮動

上圖中定義了父級塊(box)和2個子級塊(box一、box2)，咱們知道float會使塊級脫離文檔流。這樣，父級塊(box)的高度就不包含(box一、box2)，若是咱們想要父級塊的具體高度(包含box1和box2)，那麼咱們能夠參考BFC的規則【6】，即將父級元素處於BFC區域下，也就是在父級元素處生成BFC便可（參考生成方式）。咱們添加overflow:hidden，結果以下：

規則運用：清除margin合併

上圖box1和box2處在同一BFC區域中(html根元素),因此由規則【1】【2】咱們能夠理解兩個塊之間的距離爲50px，而不是（50+50）。

經過給其中一個盒子添加父級塊(box)，經過設置父級塊生成新的BFC區域，因爲box1和box2處在不一樣的BFC區域，因此距離變爲了（50+50）。 綜上狀況，我所理解的BFC就是一個區域，元素處於這個區域中，就必須遵照這個區域的規則。相應的因爲這些規則，塊就具備了一些特殊的做用。