偉大的塌陷
使用浮動(dòng)(float)的一個(gè)比較疑惑的事情是他們?cè)趺从绊懓麄兊母冈氐?。如果父元素只包含浮?dòng)元素，那么它的高度就會(huì)塌縮為零。如果父元素不包含任何的可見(jiàn)背景，這個(gè)問(wèn)題會(huì)很難被注意到，但是這是一個(gè)很重要的問(wèn)題。
塌陷的直觀對(duì)立面更不好，看看下面的情況：
當(dāng)上面的塊級(jí)元素自動(dòng)擴(kuò)展以適應(yīng)浮動(dòng)元素時(shí)，段落間的文本流中會(huì)出現(xiàn)非自然的空白換行，而且沒(méi)有有效的方法來(lái)修正這個(gè)問(wèn)題。對(duì)于這種情況，設(shè)計(jì)師的抱怨會(huì)更甚于對(duì)塌陷的抱怨（沒(méi)理解，不是設(shè)計(jì)完成之后才會(huì)進(jìn)行頁(yè)面編碼嗎？－ 糖伴西紅柿）。
為了防止怪異的布局和跨瀏覽器的問(wèn)題，塌陷問(wèn)題幾乎總是被要處理的。我們?cè)谌萜髦械母?dòng)元素之后，容器結(jié)束之前來(lái)清除浮動(dòng)。
清除浮動(dòng)的技術(shù)
如果你很明確的知道接下來(lái)的元素會(huì)是什么，可以使用 clear:both; 來(lái)清除浮動(dòng)。這個(gè)方法很不錯(cuò)，它不需要 hack，不添加額外的元素也使得它有良好的語(yǔ)義性。當(dāng)然事情并不是都可以這樣解決的，工具箱中還是需要另外幾個(gè)清除浮動(dòng)的工具。
- 空div方法從字面來(lái)看，是一個(gè)空的 div。
。有時(shí)可能會(huì)用
或者一些其他元素，但是 div 是最常用的，因?yàn)樗鼪](méi)有瀏覽器默認(rèn)樣式；沒(méi)有特殊功能，而且一般不會(huì)被 css 樣式化。這個(gè)方法因?yàn)橹皇菫榱吮憩F(xiàn)，對(duì)頁(yè)面沒(méi)有上下文涵義而被純語(yǔ)義論者嘲笑。誠(chéng)然，從嚴(yán)格的角度來(lái)說(shuō)他們是對(duì)的，但是這個(gè)方法有效而且沒(méi)有任何傷害。 - overflow 方法在父元素上設(shè)置 overflow 這個(gè) css 屬性。如果父元素的這個(gè)屬性設(shè)置為 auto 或者 hidden，父元素就會(huì)擴(kuò)展以包含浮動(dòng)。這個(gè)方法有著較好的語(yǔ)義性，因?yàn)樗恍枰~外元素。但是，如果需要增加一個(gè)新的 div 來(lái)使用這個(gè)方法，其實(shí)就和空 div 方法一樣沒(méi)有語(yǔ)義了。而且要記住，overflow 屬性不是為了清除浮動(dòng)而定義的。要小心不要覆蓋住內(nèi)容或者觸發(fā)了不需要的滾動(dòng)條。
- 簡(jiǎn)單清除方法使用了一個(gè)聰明的 css 偽選擇符(:after)來(lái)清除浮動(dòng)。比起在父元素上設(shè)置 overflow，只需要給它增加一個(gè)額外的類似于”clearfix”的類。這個(gè)類使用如下 css:
.clearfix:after {
content: “.”;
visibility: hidden;
display: block;
height: 0;
clear: both;
}
這會(huì)在清除浮動(dòng)的父元素之后應(yīng)用一點(diǎn)看不見(jiàn)的內(nèi)容。這不是全部?jī)?nèi)容，還需要一些額外的代碼來(lái)適應(yīng)那些老舊的瀏覽器。
不同的情況需要不同的浮動(dòng)清除方法。以一個(gè)具有不同樣式塊的網(wǎng)格為例。
為了從視覺(jué)上較好的把相似的塊聯(lián)系起來(lái)，需要在必要的地方開啟新行，這里是顏色改變的地方。如果每個(gè)顏色組都有一個(gè)父元素的話，我們可以使用 overflow 或者 簡(jiǎn)單清除方法?；蛘撸诿拷M之間用一個(gè)空div方法。額外的 div 之前并不存在，可以自己試試來(lái)看看哪個(gè)方法好。
浮動(dòng)的問(wèn)題
浮動(dòng)因脆弱而飽受詬病。大多數(shù)的脆弱性來(lái)自于 IE6 及其一系列的浮動(dòng)相關(guān) bug。因?yàn)樵絹?lái)越多的設(shè)計(jì)師不再支持 IE6 了，你也可以不關(guān)注它了。不過(guò)對(duì)于那些要關(guān)注的人來(lái)說(shuō)，這里有些大概。
- 推倒是浮動(dòng)元素內(nèi)的元素（大多是圖片）比浮動(dòng)元素本身寬造成的現(xiàn)象。大多數(shù)的瀏覽器會(huì)在浮動(dòng)之外渲染圖片，但是不會(huì)有伸出來(lái)的部分影響其他布局。IE 會(huì)擴(kuò)展浮動(dòng)來(lái)包含圖片，精彩大幅度地影響布局。一個(gè)普遍的例子是突破伸出主內(nèi)容之外把側(cè)欄推到下面。
快速修正：確保不是圖片造成這種情況，使用 overflow:hidden 來(lái)切除多余的部分。 - 雙倍邊距bug處理 IE6 時(shí)，另一個(gè)需要記住的事情是，如果在和浮動(dòng)方向相同的方向上設(shè)置外邊距(margin)，會(huì)引發(fā)雙倍邊距。快速修正：給浮動(dòng)設(shè)置 display:inline; 而且不用擔(dān)心，它依然是塊級(jí)元素。
- 3像素間距是指挨著浮動(dòng)元素的文本會(huì)神奇的被踢出去3像素，好像浮動(dòng)元素的周圍有一個(gè)奇怪的力場(chǎng)一樣?？焖傩拚涸谑苡绊懙奈谋旧显O(shè)置寬度或高度。
- IE7 中，底邊距 bug是當(dāng)浮動(dòng)父元素有浮動(dòng)子元素時(shí)，這些子元素的底邊距會(huì)被父元素忽略掉?？焖傩拚河酶冈氐牡變?nèi)補(bǔ)白(padding)代替。
替代品
如果需要文本環(huán)繞圖片，除了 float 之外還真沒(méi)多少替代品。說(shuō)到這，可以看看這個(gè)使文本圍繞不規(guī)則形狀的聰明技術(shù)。對(duì)于頁(yè)面布局，肯定有很多選擇。Eric Sol 在 A List Apart 上有一篇文章人造絕對(duì)定位，介紹了一個(gè)很有意思的技術(shù)，它在很多方面把浮動(dòng)的擴(kuò)展性和絕對(duì)定位的實(shí)力結(jié)合起來(lái)。CSS3 有 Template Layout Module ，當(dāng)它被廣泛支持時(shí)，將會(huì)是一個(gè)頁(yè)面布局技術(shù)的選擇。
視頻
作者還貼心地做了一個(gè)視頻來(lái)解釋相應(yīng)的概念。
