BFC和haslayout

haslayout 的概念

haslayout 是Windows Internet Explorer渲染引擎的一個內部組成部分。在InternetExplorer中，一個元素要麼本身對自身的內容進行計算大小和組織，要麼依賴於父元素來計算尺寸和組織內容。爲了調節這兩個不一樣的概念，渲染引擎採用了 hasLayout 的屬性，屬性值能夠爲true或false。當一個元素的 hasLayout屬性值爲true時，咱們說這個元素有一個佈局（layout）。

要想更好的理解 css， 尤爲是 IE 下對 css 的渲染，haslayout 是一個很是有必要完全弄清楚的概念。大多IE下的顯示錯誤，就是源於 haslayout。若是它設置成了true，它就不得不去渲染它本身，所以元素不得不擴展去包含它的流出的內容。例如浮動或者很長很長的沒有截斷的單詞，若是haslayout沒有被設置成true，那麼元素得依靠某個祖先元素來渲染它。這就是不少的ie bugs誕生的地方。

如何激發 haslayout？

大部分的 IE 顯示錯誤，均可以經過激發元素的 haslayout 屬性來修正。能夠經過設置 css 尺寸屬性(width/height)等來激發元素的 haslayout，使其「擁有佈局」。以下所示，經過設置如下 css 屬性便可。

* display: inline-block

* height: (任何值除了auto)

* float: (left 或 right)

* position: absolute

* width: (任何值除了auto)

* writing-mode: tb-rl

* zoom: (除 normal 外任意值)

Internet Explorer 7 還有一些額外的屬性(不徹底列表):

* min-height: (任意值)

* max-height: (除 none 外任意值)

* min-width: (任意值)

* max-width: (除 none 外任意值)

* overflow: (除 visible 外任意值)

* overflow-x: (除 visible 外任意值)

* overflow-y: (除 visible 外任意值)

* position: fixed

其中 overflow-x 和 overflow-y 是 css3 盒模型中的屬性，目前還未被瀏覽器普遍支持。

對於內聯元素(默認即爲內聯的元素，如 span，或 display:inline; 的元素)，

width 和 height 只在 IE5.x 下和 IE6 或更新版本的 quirks 模式下觸發 hasLayout 。而對於IE6，若是瀏覽器運行於標準兼容模式下，內聯元素會忽略 width 或 height 屬性，因此設置 width 或 height不能在此種狀況下令該元素具備 layout。

zoom 老是能夠觸發 hasLayout，可是在 IE5.0 中不支持。

BFC 的概念

BFC，塊格式化上下文( Block formatting context )，是指初始化塊級元素定義的環境。在CSS中，元素定義的環境有兩種，一種是塊格式化上下文( Block formatting context )，另外一種是行內格式化上下文( Inline formatting context )。其中咱們使用比較多的是塊級可視化上下文，CSS3草案中將之稱爲「flow root」，但咱們仍習慣叫BFC，其的觸發條件以下：

* 浮動元素（float除了none）
* 絕對定位元素(absolute/fixed)
* 設置了’display’ 屬性爲 「inline-block」，」table-cell」， 「table-caption」 的元素
* 設置了overflow 非 「visible」的元素

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

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

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

三、不浮動元素的左間距margin-left值若小於左浮動的元素寬度則不會生效，同理，不浮動元素的右間距margin-right值若小於右浮動的元素寬度也不會生效！這個跟沒觸發bfc或ie的haslayout時,不浮動元素的左右間距取值生效狀況是保持一致的；

四、在實際運用中，浮動元素跟不浮動元素間都會加入左右間距控制，考慮到浮動元素可能會加入當前流行的多設備兼容的media query ，浮動元素的寬度會隨着媒體查詢的設置的css變化而變化，而不浮動元素的margin-left/right值可否生效又是跟浮動元素的寬度關聯的，這時在不浮動元素上加入margin-left/right值來控制元素的間距，顯示麻煩，很差掌控，推薦給浮動和不浮動元素間加間距的作法是：直接給浮動元素加margin值，而不是給不浮動元素加margin值，惟一要注意的是給浮動元素加margin值時，應該考慮到ie6浮動和不浮動元素間的3px bug，即ie下浮動元素margin-left/right正確值應該比其它瀏覽器的對應值小3px才能保持與其它瀏覽器顯示效果一致。