CSS定位規則之BFC

技術改變世界！學習改變人生！

1. BFC(block formatting context,中文常譯爲塊級格式化上下文)是W3C CSS 2.1 規範中的一個概念，它決定了元素如何對其內容進行定位，以及與其餘元素的關係和相互做用。

 在進行盒子元素佈局的時候，BFC提供了一個環境，在這個環境中按照必定規則進行佈局不會影響到其它環境中的佈局。好比浮動元素會造成BFC，浮動元素內部子元素的主要受該浮動元素影響，兩個浮動元素之間是互不影響的。

 也就是說，若是一個元素符合了成爲BFC的條件，該元素內部元素的佈局和定位就和外部元素互不影響(除非內部的盒子創建了新的 BFC)，是一個隔離了的獨立容器。

 在CSS3 中，BFC 叫作Flow Root。

2.造成BFC的條件(符合如下任一條件便可)： 

1) float的值不爲none；

2)overflow的值不爲visible；

3)display的值爲 table-cell、table-caption和inline-block之一；

4)position的值不爲 static或relative中的任何一個；

3.BFC常見做用1)包含浮動元素BFC會根據子元素的狀況自適應高度，這個特性是對父元素使overflow:hidden/auto/scroll、float:left/right樣式能夠閉合浮動的原理。此外網上有資料說使用display:table能夠隱式觸發table-cell/table-caption，來建立BFC。

<div style="border:1px solid #00F;overflow:hidden;width:300px;"> 

<div style="float:left;background:#939;">個人父元素是BFC</div> 

</div> 

<div style="line-height:3em;">----------我是華麗分割線-----------</div> 

<div style="border:1px solid gray;width:300px;">  

<div style="float:left;background:#3C6;">個人父元素不是BFC</div> 

</div> 

 

 上面的例子中，有兩個div ，它們各包含一個設置了浮動的div元素，但第二個 div 出現了「高度塌陷」，這是由於內部的浮動元素脫離了普通流，所以該 div 至關於一個空標籤，沒有高度和寬度，即高度爲 0 ，上下邊框也重疊在一塊兒。而第二個div 使用 overflow: hidden 建立了 BFC ，能夠包含浮動元素，所以能正確表現出高度，其邊框位置也正常了。

PS：此方法只能在支持BFC的瀏覽器（IE8+，firefox，chrome，safari）經過建立新的BFC閉合浮動；在不支持BFC的瀏覽器（IE6-7），須要經過觸發hasLayout 閉合浮動。

2)不被浮動元素覆蓋浮動元素會無視兄弟元素的存在，覆蓋在兄弟元素的上面，爲該兄弟元素建立BFC後能夠阻止這種狀況的出現，以下示例：

 

<div style="float:left;width:150px;height:50px;background:#FF0;"> 我是浮動元素 </div> 

<div style="width:200px;height:80px;background:#30F;color:#fff;"> 我是非浮動元素，而且沒有建立

BFC </div> 

<div style="line-height:3em;">----------我是華麗分割線-----------</div> 

<div style="float:left;width:150px;height:50px;background:#FF0;"> 

 我是浮動元素</div> 

<div style="width:200px;height:80px;background:#30F;color:#fff;display:inline-block;"> 

我是非浮動元素，建立了BFC </div> 

 

效果圖所示，藍色背景的元素經過display:inline-block建立了BFC，則浮動的兄弟元素就不覆蓋在該元素上面了。

 以上的狀況僅是元素寬度之和沒有超出父元素寬度的狀況，假設浮動元素寬度和它的非浮動兄弟元素寬度都超過了父元素的寬度，非浮動元素會降低到下一行，即處於浮動元素下方，以下所示：

 <div style="width:300px;"> 

<div style="float:left;width:150px;height:50px;background:#FF0;">  我是浮動元素</div> 

  <div style="width:200px;height:80px;background:#30F;color:#fff;overflow:hidden;"> 

  我是非浮動元素，建立了BFC </div> </div> 

 

3)阻止父子元素的margin 摺疊在《認識margin摺疊》一文中講過外邊距摺疊的規則：僅當兩個塊級元素毗鄰而且在同一個塊級格式化上下文時，它們垂直方向之間的外邊距纔會疊加。也就是說，即使兩個塊級元素相鄰，但當它們不在同一個塊級格式化上下文時它們的邊距也不會摺疊。示例以下。

<div style="margin-top:20px;background:yellow;width:300px;"> 

<div style="margin-top:20px;"> 個人上外邊距是20px，父級元素不是BFC </div> 

</div> 

<div style="margin-top:20px;background:yellow;overflow:auto;width:300px;"> 

   <div style="margin-top:20px;"> 個人上外邊距是20px，父級元素是BFC  </div> 

</div> 

 

如上圖的例子，上述div元素都有頂部外邊距，但第二個div 的邊距沒有與它的子元素的外邊距摺疊。這是由於第二個div 建立了新的BFC。