|
清除浮動的技術
如果你很明確的知道接下來的元素會是什么，可以使用 clear:both; 來清除浮動。這個方法很不錯，它不需要 hack，不添加額外的元素也使得它有良好的語義性。當然事情并不是都可以這樣解決的，工具箱中還是需要另外幾個清除浮動的工具。
- 空div方法從字面來看，是一個空的 div。
。有時可能會用
或者一些其他元素，但是 div 是最常用的，因為它沒有瀏覽器默認樣式；沒有特殊功能，而且一般不會被 css 樣式化。這個方法因為只是為了表現(xiàn)，對頁面沒有上下文涵義而被純語義論者嘲笑。誠然，從嚴格的角度來說他們是對的，但是這個方法有效而且沒有任何傷害。
- overflow 方法在父元素上設置 overflow 這個 css 屬性。如果父元素的這個屬性設置為 auto 或者 hidden，父元素就會擴展以包含浮動。這個方法有著較好的語義性，因為他不需要額外元素。但是，如果需要增加一個新的 div 來使用這個方法，其實就和空 div 方法一樣沒有語義了。而且要記住，overflow 屬性不是為了清除浮動而定義的。要小心不要覆蓋住內容或者觸發(fā)了不需要的滾動條。
- 簡單清除方法使用了一個聰明的 css 偽選擇符(:after)來清除浮動。比起在父元素上設置 overflow，只需要給它增加一個額外的類似于”clearfix”的類。這個類使用如下 css:
.clearfix:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
這會在清除浮動的父元素之后應用一點看不見的內容。這不是全部內容，還需要一些額外的代碼來適應那些老舊的瀏覽器。
不同的情況需要不同的浮動清除方法。以一個具有不同樣式塊的網(wǎng)格為例。
為了從視覺上較好的把相似的塊聯(lián)系起來，需要在必要的地方開啟新行，這里是顏色改變的地方。如果每個顏色組都有一個父元素的話，我們可以使用 overflow 或者 簡單清除方法�；蛘�，在每組之間用一個空div方法。額外的 div 之前并不存在，可以自己試試來看看哪個方法好。
浮動的問題
浮動因脆弱而飽受詬病。大多數(shù)的脆弱性來自于 IE6 及其一系列的浮動相關 bug。因為越來越多的設計師不再支持 IE6 了，你也可以不關注它了。不過對于那些要關注的人來說，這里有些大概。
- 推倒是浮動元素內的元素（大多是圖片）比浮動元素本身寬造成的現(xiàn)象。大多數(shù)的瀏覽器會在浮動之外渲染圖片，但是不會有伸出來的部分影響其他布局。IE 會擴展浮動來包含圖片，精彩大幅度地影響布局。一個普遍的例子是突破伸出主內容之外把側欄推到下面。
快速修正：確保不是圖片造成這種情況，使用 overflow:hidden 來切除多余的部分。
- 雙倍邊距bug處理 IE6 時，另一個需要記住的事情是，如果在和浮動方向相同的方向上設置外邊距(margin)，會引發(fā)雙倍邊距。快速修正：給浮動設置 display:inline; 而且不用擔心，它依然是塊級元素。
- 3像素間距是指挨著浮動元素的文本會神奇的被踢出去3像素，好像浮動元素的周圍有一個奇怪的力場一樣。快速修正：在受影響的文本上設置寬度或高度。
- IE7 中，底邊距 bug是當浮動父元素有浮動子元素時，這些子元素的底邊距會被父元素忽略掉�？焖傩拚河酶冈氐牡變妊a白(padding)代替。
替代品
如果需要文本環(huán)繞圖片，除了 float 之外還真沒多少替代品。說到這，可以看看這個使文本圍繞不規(guī)則形狀的聰明技術。對于頁面布局，肯定有很多選擇。Eric Sol 在 A List Apart 上有一篇文章人造絕對定位，介紹了一個很有意思的技術，它在很多方面把浮動的擴展性和絕對定位的實力結合起來。CSS3 有 Template Layout Module ，當它被廣泛支持時，將會是一個頁面布局技術的選擇。
視頻
作者還貼心地做了一個視頻來解釋相應的概念。
本文鏈接：http://m.95time.cn/tech/web/2009/6954.asp 
出處：前端觀察
責任編輯：bluehearts
上一頁 關于浮動的前世今生 [4] 下一頁
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 5 頁 關于浮動的前世今生 [5]
