CSS浮動屬性Float詳解(2)

作者:佚名 來源:前端觀察 時間:2009-09-17 標簽: CSS浮動屬性

偉大的塌陷

使用浮動(float)的一個比較疑惑的事情是他們怎么影響包含他們的父元素的。如果父元素只包含浮動元素,那么它的高度就會塌縮為零。如果父元素不包含任何的可見背景,這個問題會很難被注意到,但是這是一個很重要的問題。

塌陷的直觀對立面更不好,看看下面的情況:

當上面的塊級元素自動擴展以適應浮動元素時,段落間的文本流中會出現非自然的空白換行,而且沒有有效的方法來修正這個問題。對于這種情況,設計師的抱怨會更甚于對塌陷的抱怨(沒理解,不是設計完成之后才會進行頁面編碼嗎?- 糖伴西紅柿)。

為了防止怪異的布局和跨瀏覽器的問題,塌陷問題幾乎總是被要處理的。我們在容器中的浮動元素之后,容器結束之前來清除浮動。

清除浮動的技術

如果你很明確的知道接下來的元素會是什么,可以使用 clear:both; 來清除浮動。這個方法很不錯,它不需要 hack,不添加額外的元素也使得它有良好的語義性。當然事情并不是都可以這樣解決的,工具箱中還是需要另外幾個清除浮動的工具。

  • 空div方法從字面來看,是一個空的 div。
    。有時可能會用
    或者一些其他元素,但是 div 是最常用的,因為它沒有瀏覽器默認樣式;沒有特殊功能,而且一般不會被 css 樣式化。這個方法因為只是為了表現,對頁面沒有上下文涵義而被純語義論者嘲笑。誠然,從嚴格的角度來說他們是對的,但是這個方法有效而且沒有任何傷害。
  • overflow 方法在父元素上設置 overflow 這個 css 屬性。如果父元素的這個屬性設置為 auto 或者 hidden,父元素就會擴展以包含浮動。這個方法有著較好的語義性,因為他不需要額外元素。但是,如果需要增加一個新的 div 來使用這個方法,其實就和空 div 方法一樣沒有語義了。而且要記住,overflow 屬性不是為了清除浮動而定義的。要小心不要覆蓋住內容或者觸發了不需要的滾動條。
  • 簡單清除方法使用了一個聰明的 css 偽選擇符(:after)來清除浮動。比起在父元素上設置 overflow,只需要給它增加一個額外的類似于”clearfix”的類。這個類使用如下 css:

       .clearfix:after {
           content: ".";
           visibility: hidden;
           display: block;
           height: 0;
           clear: both;
       }


    這會在清除浮動的父元素之后應用一點看不見的內容。這不是全部內容,還需要一些額外的代碼來適應那些老舊的瀏覽器。

不同的情況需要不同的浮動清除方法。以一個具有不同樣式塊的網格為例。

為了從視覺上較好的把相似的塊聯系起來,需要在必要的地方開啟新行,這里是顏色改變的地方。如果每個顏色組都有一個父元素的話,我們可以使用 overflow 或者 簡單清除方法。或者,在每組之間用一個空div方法。額外的 div 之前并不存在,可以自己試試來看看哪個方法好。

浮動的問題

浮動因脆弱而飽受詬病。大多數的脆弱性來自于 IE6 及其一系列的浮動相關 bug。因為越來越多的設計師不再支持 IE6 了,你也可以不關注它了。不過對于那些要關注的人來說,這里有些大概。

  • 推倒是浮動元素內的元素(大多是圖片)比浮動元素本身寬造成的現象。大多數的瀏覽器會在浮動之外渲染圖片,但是不會有伸出來的部分影響其他布局。IE 會擴展浮動來包含圖片,精彩大幅度地影響布局。一個普遍的例子是突破伸出主內容之外把側欄推到下面。



    快速修正:確保不是圖片造成這種情況,使用 overflow:hidden 來切除多余的部分。
  • 雙倍邊距bug處理 IE6 時,另一個需要記住的事情是,如果在和浮動方向相同的方向上設置外邊距(margin),會引發雙倍邊距。快速修正:給浮動設置 display:inline; 而且不用擔心,它依然是塊級元素。
  • 3像素間距是指挨著浮動元素的文本會神奇的被踢出去3像素,好像浮動元素的周圍有一個奇怪的力場一樣。快速修正:在受影響的文本上設置寬度或高度。
  • IE7 中,底邊距 bug是當浮動父元素有浮動子元素時,這些子元素的底邊距會被父元素忽略掉。快速修正:用父元素的底內補白(padding)代替。

替代品

如果需要文本環繞圖片,除了 float 之外還真沒多少替代品。說到這,可以看看這個使文本圍繞不規則形狀的聰明技術。對于頁面布局,肯定有很多選擇。Eric Sol 在 A List Apart 上有一篇文章人造絕對定位,介紹了一個很有意思的技術,它在很多方面把浮動的擴展性和絕對定位的實力結合起來。CSS3 有 Template Layout Module ,當它被廣泛支持時,將會是一個頁面布局技術的選擇。

視頻

作者還貼心地做了一個視頻來解釋相應的概念。

相關文章:

推薦設計

最新文章