關於BFC與haslayout的相關知識瞭解

一、什麼是BFC

BFC(Block Formatting Context，塊級元素格式化上下文)是 W3C CSS 2.1 規範中的一個概念，它決定了元素如何對其內容進行定位，以及與其餘元素的關係和相互做用；

（BFC的全名是block formatting context，翻譯成中文就是塊級元素格式上下文，聽起來有些彆扭，字面上的意思大概就是一個元素的佈局上下文類型。）

簡 單的說，BFC就是一種佈局方式，在建立了 BFC後，其子元素會一個接一個地放置：盒子們從所在的 containing block 頂部起，水平方向上一個接一個撐滿整個寬度，垂直方向上它們的起點是包含塊的頂部，兩個相鄰的元素之間的垂直距離取決於 ‘margin’ 特性。在 同一個BFC中，兩個元素纔有可能發生垂直Margin的重疊，這個包括相鄰元素，嵌套元素，只要他們之間沒有間隔(即父元素的邊框，非空內 容，padding等)就會發生margin重疊，即margin會發生重合。更重要的是：建立BFC,能消除元素對相鄰元素的佈局影響，常見的應用 是：使用overflow:hidden建立BFC ,來清除浮動元素對後面元素的佈局影響 。

二、怎麼建立BFC

當一個HTML元素知足下面條件的任何一點，均可以觸發BFC：

float的值不爲」none」 (如：float:left/right)

overflow的值不爲」visible」(如：overflow:hidden)

display的值爲 「table-cell」, 「table-caption」, or 「inline-block」中的任何一個

position的值不爲 「static」 或 「relative」中的任何一個(如：position:absolute)

三、關於Haslayout

（1）hasLayout是ie私有的概念，ie7及更低版本的ie瀏覽器不支持BFC，但咱們能夠針對ie七、6瀏覽器加入對應的hasLayout規則來實現BFC的效果

（2）Windows IE 專有（只有IE5.5/6/7支持？）

·（3）是HTML元素的一個屬性，該屬性的值爲布爾值。

（值爲false的元素能夠經過某些方法使Haslayout值變爲true，而值爲true的元素沒法變回false）

（4）表現形式與BFC元素很類似

haslayout：hasLayout 是IE內部的一個特有的隱形屬性，屬性值爲true/false。元素一旦擁有了這 個屬性，就擁有了佈局，也就是說該元素能夠對本身及其子元素進行尺寸計算和定位（比起依賴父元素進行佈局會花費更大的代價）。因爲這個元素是隱形的，不能 經過CSS來設置hasLayout:true/false;能夠經過js來檢測元素是否擁有佈局。hasLayout是隻讀屬性，一旦觸發，不可逆轉。 有些元素自己就默認擁有佈局，有的元素能夠經過一些CSS屬性設置（如display、width、height等）來激發產生布局。並非全部元素都擁有佈局的緣由是爲了簡潔和提升性能，擁有佈局會消耗內存，並不輕量，會下降性能。最經常使用的是在CSS中設置zoom:1;來激發佈局，不會產生任何其餘影響的狀況下讓元素擁有佈局。

四、使用BFC和hasLayout應該注意的問題

一、浮動和不浮動元素間，ie6會有3px的間隙，這是ie6的bug，解決方法是：若浮動元素是左浮動，則給左浮動元素加margin-right:-3px;若浮動元素是右浮動，則給右浮動元素  加margin-left:-3px;

二、overflow:hidden觸發BFC的同時，也能觸發ie7的hasLayout，但overflow:hidden是ie7新添加的觸發hasLayout的新屬性，ie6並不支持，所以要兼容ie6必須加_zoom:1;

 

未完待續。。。。。。