CSS布局中一個(gè)簡(jiǎn)單的應(yīng)用BFC的例子

什么是BFC

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

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

W3C標(biāo)準(zhǔn)中這樣描述：

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.

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

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

BFC的一個(gè)簡(jiǎn)單應(yīng)用

一個(gè)簡(jiǎn)單的例子：

html:

css:

這段代碼是結(jié)構(gòu)簡(jiǎn)單的三個(gè)元素的疊放，效果如下：

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

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

這次將看到：

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

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

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

所以，當(dāng)發(fā)現(xiàn)有些元素的布局在IE下有異常時(shí)，可以有充分的理由來(lái)懷疑可能是hasLayout屬性為false。而且這個(gè)屬性值不能直接設(shè)置。一個(gè)元素要么默認(rèn)擁有，要么通過(guò)設(shè)置特定的CSS屬性來(lái)獲取。直接的使元素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，因?yàn)檫@個(gè)設(shè)置對(duì)元素外觀不會(huì)造成任何影響。但是這個(gè)屬性是IE特有的CSS屬性，不會(huì)通過(guò)CSS檢查器W3C提供的CSS校驗(yàn)器（當(dāng)然，讓不讓通過(guò)校驗(yàn)實(shí)際取決于各種校驗(yàn)器的規(guī)則）。所以，有推薦對(duì)于IE7，最好是設(shè)置min-height:0。因?yàn)?是min-height的初始值，這樣不會(huì)對(duì)元素外觀造成影響。對(duì)于IE6及更早的版本，推薦方法是設(shè)置height:1%。這個(gè)高度會(huì)使得容器盒子的大小剛好包含內(nèi)容區(qū)而忽略掉真正的屬性值。但這個(gè)設(shè)置的缺陷是會(huì)影響到其他瀏覽器的解析，因此需要使用hack屏蔽掉對(duì)其他瀏覽器的影響。
所以，最終的代碼可能是：

你偏愛(ài)哪一種呢？歡迎探討。