css overflow 閉合浮動元素無效的解決

具體比如一個 div 中有兩個 span ,如果把 span 浮動了,你會發現 div 的背景色會失效!

原因是 div 預設會象傳統的 table 一樣自動擴大,但預設不對浮動後的元素產生這樣的效果.所以這時的 div 根本沒有自動增大一塊來容納 span .

據說解決辦法是在 div 的最後加一個空白文本之類的元素,還有討論用 overflow:hidden; 的(ie通常不相容,我試過沒效果的,當然這讓我們理解 overflow 作用原理是很好的).

說實話我覺得這些對 div 的討論會蛋痛,不行的直接用 table 好了,沒什麼必要非得強調 css 的標準,當然 "專業" 的網頁設計者是萬萬不會同意我的,呵呵.

    <div width="100%" border="0" cellpadding="1" cellspacing="1" bgcolor="#CCCCCC" style="background-color:#CCCCCC; overflow:hidden; ">
        <span style="float:left; background-color:#CCCCCC; "><{$group1.group_name}></span>
        <span style="float:right;">分區版主:<{$group1.group_name}></span>&nbsp;
    </div>

最關鍵是後面的那個 "&nbsp;"

--------------------------------------------------

http://bbs.blueidea.com/viewthread.php?tid=2658256&extra=page%3D1%26amp%3Bfilter%3Drate

照CSS規範，浮動元素（floats）會被移出文檔流，不會影響到塊狀盒子的布局而只會影響內聯盒子（通常是文本）的排列。因此當其高度超出包含容器時，一般父容器不會自動伸長以閉合浮動元素。但是有時我們卻需要這種自動閉合行為，具體如何處理呢？...

--------------------------------------------------

http://baike.baidu.com/view/1090596.htm

這裡說得很清楚,特別是那張圖.

Overflow

目錄

    overflow CSS屬性
    日本遊戲品牌
    電腦用語
展開

編輯本段overflow CSS屬性
　　overflow 為CSS中設定當對象的內容超過其指定高度及寬度時如何管理內容的屬性。
基本特性
　　
初始值：    visible     適用於：    block-level and replaced elements
繼承性：    無     百分比：    N/A
媒體：    visual     版本：    CSS2
相容性：    IE4+ NS6+    
   
　　
 

基本文法
　　overflow-x overflow-y
　　overflow : visible | auto | hidden | scroll
文法取值
　　visible :　預設值。不剪下內容也不添加捲軸。假如顯式聲明此預設值， 對象將以包含對象的 window 或 frame 的尺寸裁切。並且 clip 屬性設定將失效 auto :　在必需時對象內容才會被裁切或顯示捲軸 hidden :　不顯示超過對象尺寸的內容 scroll :　總是顯示捲軸
　　清除浮動
　　設定overflow的一個更流行的用處是，清除浮動。設定overflow並不會在該元素上清除浮動，它將清除自己(self-clear)。意思就是，應用了overflow(auto或hidden)的元素，將會擴充到它需要的大小以包圍它裡面的浮動的子項目(而不是疊了起來(collapsing))，假設未定義高度。就像這樣：
 

使用說明
　　檢索或設定當對象的內容超過其指定高度及寬度時如何管理內容。所有對象的預設值是 visible ，除了 textarea 對象和 body 對象的預設值是 auto 。設定 textarea 對象此屬性值為 hidden 將隱藏其捲軸。對於 table 來說，假如 table-layout 屬性設定為 fixed ，則 td 對象支援帶有預設值為 hidden 的 overflow 屬性。如果設為 scroll 或者 auto ，那麼超出 td 尺寸的內容將被剪下。如果設為 visible ，將導致額外的文本溢出到右邊或左邊（視 direction 屬性設定而定）的儲存格。自IE5開始，此屬性在MAC平台上可用。自IE6開始，當你使用 !DOCTYPE 聲明指定了 standards-compliant 模式，此屬性可以應用於 html 對象。對應的指令碼特性為 overflow 。