CSS之BFC及其應用

BFC是Block Formatting Context的縮寫，直譯過來就是「塊級格式化上下文」。先無論它究竟是什麼，看一個例子：

.parent{
 border: 1px solid blue; } .children{  width: 100px;  height: 100px;  background: red;  float: left;  margin: 10px; } <div class="parent"> <div class="children"></div> <div class="children"></div> </div>

結果：

想必你們都瞭解，子元素float時父容器是不會被撐開高度的。通常的解決方法是給父容器加上 .clearFix類，

.clearfix:after{ content:"."; display:block; height:0; clear:both; visibility:hidden }

清除浮動後，父容器能自動得到正確的高度了：

如今經過BFC，能夠用更簡單的方法解決這個問題了，只須要在父容器的樣式里加上一句 overflow: hidden :

.parent{ border: 1px solid blue; overflow: hidden; }

原理：塊級元素使用 overflow: hidden 的時候會建立一個 BFC ,而計算BFC的高度時，浮動元素也會參與計算。
BFC還有另一個很是重要的特性，那就是垂直方向的外邊距重疊，仍是以前那兩個div,樣式改成:

.children{ width: 100px; height: 100px; background: red; margin: 50px 10px; overflow: hidden; }

咱們爲兩個div設置了上下50px的外邊距，按理來講兩個div的距離應該是100px；然而事與願違，

上邊div的margin-bottom與下邊div的margin-top重疊了。
固然，BFC的特性不止這些，建立BFC的方法也不僅有overflow: hidden。

BFC元素的特性

參考w3-CSS2規範,9.4.1節，總結以下：
1 內部的Box會在垂直方向從上到下排列。
2 內部的Box會在水平方向從左到右排列（對於從右到左的格式化則相反）。即便存在浮動也是如此。
3 Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生摺疊
4 BFC的區域不會與float box疊加。這條後邊會解釋
5 BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素，反之亦然。
6 計算BFC的高度時，浮動元素也參與計算。

哪些元素會建立BFC？

• 根元素
• float元素
• 絕對定位元素（position屬性爲absolute或fixed）
• 不是塊級框的元素（display屬性爲inline-block, table-cell, table-caption等）
• overflow屬性不爲visible的元素

BFC的應用場景

1 閉合浮動 即前邊父容器獲取高度問題，再也不介紹了 注意這裏不叫清除浮動，由於BFC元素能夠包含浮動元素，而且浮動元素也參與計算高度。
2 防止垂直 margin 重疊
前邊提到的垂直外邊距摺疊問題，能夠經過給子元素外層包裹一個BFC塊，像這樣：

<div class="parent"> <div class="children"></div> <div class="BFC"> <div class="children"></div> </div> </div>

這樣以前的兩個children塊便不屬於同一個BFC了。可是通常不建議濫用BFC來解決此類問題，推薦使用同向的margin-top，margin-bottom來解決。
3 多列布局
前邊BFC特性第4條提到了，BFC的區域不會與float box疊加，這句話是什麼意思呢，看一個例子：

.food{
  width: 100px; height: 100px; float: left; } <div class="container"> <img class="food" src="food.png"> <p class="BFC">商品介紹商品介紹商品介紹商品介紹商品介紹商品介紹商品介紹商品介紹 商品介紹商品介紹商品介紹商品介紹商品介紹商品介紹商品介紹商品介紹 商品介紹商品介紹商品介紹商品介紹商品介紹商品介紹商品介紹商品介紹 商品介紹商品介紹商品介紹商品介紹商品介紹商品介紹商品介紹商品介紹 商品介紹商品介紹商品介紹商品介紹商品介紹商品介紹商品介紹商品介紹 商品介紹商品介紹商品介紹商品介紹商品介紹商品介紹商品介紹商品介紹 商品介紹商品介紹商品介紹商品介紹商品介紹商品介紹商品介紹商品介紹 商品介紹商品介紹商品介紹商品介紹商品介紹商品介紹商品介紹商品介紹 </p> </div>

當咱們展現一張圖片和介紹性文字的時候，通常會給圖片加上float屬性，可是有時候這種文字環繞的方式不是咱們要的效果，怎麼將圖片和文字變成兩列式佈局呢？很簡單，給文字的容器p元素建立一個BFC。

.BFC{ overflow: hidden; }

使用BFC，很簡單方便的就將效果實現了。
圖片和文字過於緊湊顯然不夠美觀，咱們給圖片和文字設置20px的間距。若是直接給文字塊設置左邊距，須要將圖片的寬度計算在內，即120px，這種方式顯然很差。這種狀況咱們只需給浮動的元素設置一個20px的右邊距便可。

.food{ width: 100px; height: 100px; float: left; margin-right: 20px; }

總結

• BFC是指塊級格式化上下文，它是一個獨立的渲染區域，內部的元素佈局方式與外部無關；
• 主要特色是相鄰元素間垂直方向的外邊距會被摺疊，以及內部的浮動元素會參與計算高度；
• 主要用途是閉合浮動使父容器自動得到高度，以及實現多列布局。