認識和理解css佈局中的BFC

認識和理解css佈局中的BFC

BFC的定義

是 W3C CSS 2.1 規範中的一個概念，它決定了元素如何對其內容進行定位，以及與其餘元素的關係和相互做用。

Block Formatting Context 的元素的特色

• 其子元素會一個接一個地放置。垂直方向上他們的起點是一個包含塊的頂部，兩個相鄰的元素之間的垂直距離取決於 ‘margin’ 特性。
• 相鄰的塊級元素的垂直邊距會摺疊（collapse）。

• 每個元素左外邊(margin)與包含塊的左邊相接觸（對於從右到左的格式化，右外邊接觸右邊）， 即便存在浮動也是如此（儘管一個元素的內容區域會因爲浮動而壓縮），除非這個元素也建立了一個新的 Block Formatting Context 。

  例如：
  <div class="con"> <img class="headImg floatLeft" src="mm.jpg" /> <div class="mainCon">many text and pic here</div> </div>

.headImg 和 div.mainCon的左外邊框是與div.con左邊框接觸的，當div.mainCon內容較多時，表現爲圍繞浮動的.headImg元素,觸發div.mainCon元素的BFC即避免圍繞浮動元素，從而實現2列布局.

觸發元素的BFC的方式:

1. 設置浮動 則div.mainCon的寬度會自適應內容多少，div.con剩餘寬度不夠容納div.mainCon的內容時會出現換行，要確保2列布局須要指定div.mainCon的寬度
2. 設置overflow:hidden 2列布局，div.mainCon自適應容器剩餘寬度，但設置溢出隱藏，限制了不能在div.mainCon外佈局其餘元素(如 箭頭 浮動菜單...)， 注意(設置 overflow:hidden; 或 overflow:auto; 元素都是隱藏溢出的 test in chrome)
3. ** display:inline-block 或 display:table-caption 效果同float** , div.mainCon 寬度自適應內容多少 內容多會換行，要設定寬度才能確保2列布局
4. display:table-cell 效果同float ,寬度自適應內容多少 內容多不會換行，不用設定寬度確保2列布局，可是 ie6-7不支持display:table-cell
5. position:absolute; 效果同 display:table-cell, 兼容性好一點

---

BFC究竟是什麼？

當涉及到可視化佈局的時候，Block Formatting Context提供了一個環境，HTML元素在這個環境中按照必定規則進行佈局。BFC環境中的元素不會影響到其它環境中的佈局。好比浮動元素會造成BFC，浮動元素內部子元素的主要受該浮動元素影響，兩個浮動元素之間是互不影響的。這裏有點相似一個BFC就是一個獨立的行政單位的意思。

怎樣才能造成BFC

• float的值不爲none。
• overflow的值不爲visible。
• display的值爲table-cell, table-caption, inline-block中的任何一個。
• position的值不爲relative和static。

BFC的做用

不和浮動元素重疊，實現兩列布局

若是一個浮動元素後面跟着一個非浮動的元素，那麼就會產生一個覆蓋的現象，不少自適應的兩欄佈局就是這麼作的。好比下圖的效果，參考例子

<div style="float:left; border: 2px solid red"><img src="user-img" /></div> <p style="border: 2px solid blue;display:block;overflow:hidden;*zoom:1"> The quick brown fox jumped over the 4seohunt.com lazy dog's back. The quick brown fox jumped over the lazy dog's back. The quick brown fox jumped over the lazy dog's back. The quick brown fox jumped over the lazy dog's back. The quick brown fox jumped over the lazy dog's back. </p>

清除子元素浮動影響 clearfix

只要把父元素設爲BFC就能夠避免子元素的浮動致使父元素的高度塌陷的問題，最多見的用法就是在父元素上設置overflow: hidden樣式，對於IE6加上zoom:1就能夠了(觸發IE Haslayout)。

子元素和父元素同屬一個BFC,子元素的Margin邊距穿透父元素與其餘元素margin摺疊問題的修復

按照BFC的定義，只有同屬於一個BFC時，兩個元素纔有可能發生垂直Margin的重疊，這個包括相鄰元素，嵌套元素，只要他們之間沒有阻擋(例如邊框，非空內容，padding等)就會發生margin重疊。(子元素和父元素margin重疊，子元素和父元素的兄弟元素margin重疊)

所以要解決垂直margin重疊問題，只要讓它們不在同一個BFC就好了，可是對於兩個相鄰元素來講，意義不大，沒有必要給它們加個外殼，可是對於嵌套元素來講就頗有必要了，只要把父元素設爲BFC就能夠了。這樣子元素的margin就不會和父元素的margin發生重疊了。

<div class="prev">prev div</div> <div class="next mt10 h100 bg-darkred"> <h2 class="mt100 h10 bg-darkblue">i am title</h2> </div>

div.pre 和 div.next的垂直間距爲100px; 由於 div.next 和它內部的h2屬於同一個BFC，因此垂直margin重疊了(h2的垂直margin穿透了父元素 影響了父元素和其餘元素的關係)

解決方法：

1. 讓2個margin-top不相鄰(div.next的margin-top:10px 和 h2的margin-top:100px),設置父元素的border 或padding
2. 觸發父元素的BFC， 造成獨立的佈局單元