CSS布局中一個簡單的應用BFC的例子

什么是BFC

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

什么情況產(chǎn)生BFC

W3C標準中這樣描述：

Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with ‘overflow’ other than ‘visible’ (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

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

• float：left|right
• position：absolute|fixed
• display: table-cell|table-caption|inline-block
• overflow: hidden|scroll|auto

BFC的一個簡單應用

一個簡單的例子：

html:

css:

這段代碼是結構簡單的三個元素的疊放，效果如下：

這時，如果要將文字部分放到圖片的右側(cè)，很多人都會想到給.pic使用float:
css:

右側(cè)內(nèi)容并沒有如我們預料一樣規(guī)整的排在右側(cè)，而是將左側(cè)圖片包圍起來。接下來，我們?yōu)橛覀?cè)內(nèi)容部分設置overflow:hidden屬性來使它形成一個新的BFC：
css:

這次將看到：

這確實是我們想要的。可是，在IE6下看到的卻是下面這樣：

不僅內(nèi)容區(qū)沒有排在右側(cè)，而且遭遇了雙邊距bug。雙邊距bug非本文重點討論，直接為.pic增加display:inline來解決。我們關心的是為什么IE6下右側(cè)內(nèi)容元素還是不能決定自己的布局呢？這里涉及到了另一個概念HasLayout。其實，在完美世界的字典里，是沒有HasLayout這個概念的。它是IE瀏覽器引擎內(nèi)部特有的屬性，它可以影響到元素的定位和元素之間的相互作用。當一個元素的HasLayout屬性為true時，這個元素才可以決定自己和其子孫元素的布局。為數(shù)不多的元素默認這個屬性值為true，包括：

• body and html
• table, tr, th, td
• img
• hr
• input, button, file, select, textarea, fieldset
• marquee
• frameset, frame, iframe
• objects, applets, embed

所以，當發(fā)現(xiàn)有些元素的布局在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之外的值

• 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校驗器（當然，讓不讓通過校驗實際取決于各種校驗器的規(guī)則）。所以，有推薦對于IE7，最好是設置min-height:0。因為0是min-height的初始值，這樣不會對元素外觀造成影響。對于IE6及更早的版本，推薦方法是設置height:1%。這個高度會使得容器盒子的大小剛好包含內(nèi)容區(qū)而忽略掉真正的屬性值。但這個設置的缺陷是會影響到其他瀏覽器的解析，因此需要使用hack屏蔽掉對其他瀏覽器的影響。
所以，最終的代碼可能是：

你偏愛哪一種呢？歡迎探討。