CSS BFC hasLayout模型

BFC(Block Formatting Context)，簡單講，它是提供了一個獨立佈局的環境，每一個BFC都遵照同一套佈局規則。例如，在同一個BFC內，盒子會一個挨着一個的排，相鄰盒子的間距是由margin決定且垂直方向的margin會重疊。而float和clear float也只對同一個BFC內的元素有效。

 

 

非塊級盒子的浮動元素、絕對定位元素及塊級容器(好比inline-blocks，table-cells和table-captions)，以及overflow屬性是visible以外任意值的塊級盒子，都會建立了一個BFC。即當元素CSS屬性設置了下列之一時，便可建立一個BFC:

 

float：left|right

position：absolute|fixed

display: table-cell|table-caption|inline-block

overflow: hidden|scroll|auto

 

IE中HasLayout是IE瀏覽器引擎內部特有的屬性，它能夠影響到元素的定位和元素之間的相互做用。當一個元素的HasLayout屬性爲true時，這個元素才能夠決定本身和其子孫元素的佈局。

 

因此，當發現有些元素的佈局在IE下有異常時，能夠有充分的理由來懷疑多是hasLayout屬性爲false。並且這個屬性值不能直接設置。一個元素要麼默認擁有，要麼經過設置特定的CSS屬性來獲取。直接的使元素hasLayout屬性值爲true的方法是聲明下面的CSS屬性之一：

 

width: 除auto以外的值

height: 除auto以外的值

float: left|right

position: absolute

display: inline-block

writing-mode: tb-rl(IE)

zoom: 除normal以外的值

IE7中增長了一些一樣效果的屬性：

min-height: 任意值

max-height: 除 「none」 以外的任意值

min-width: 任意值

max-width: 除 「none」 以外的任意值

overflow: hidden|scroll|auto

overflow-x: hidden|scroll|auto

overflow-y: hidden|scroll|auto

position: fixed

 

最經常使用的是zoom:1，由於這個設置對元素外觀不會形成任何影響。可是這個屬性是IE特有的CSS屬性，不會經過CSS檢查器W3C提供的CSS校驗器（固然，讓不讓經過校驗實際取決於各類校驗器的規則）。