Leah's Life

float 可說是常用的 css 屬性 但也常常會有 bug 出現 使用 float 的好處是可以將原本直列堆疊的區塊改為左右排列 float 加上指定寬度後,可以方便快速地讓重複的區塊變整齊 但 float 在 firefox 有個缺點,雖然他的解讀是正確的 _2007/08/24 若一個大區塊包住兩個直列堆疊的小區塊,兩個小區塊使用 float 之後 大區塊則因為小區塊浮動之後,小區塊跳出了原本的框框? 而且還是最不會出現 bug 的 firefox 出現了 此時只要在包住兩個小區塊的大區塊標籤上做設定即可以解決這樣的困擾 假設 #box 包住了 .box1 和 .box2 .box1 { float: left; } .box2 { float: right; } 則要多加一段: #box:after { content: "."; display: block; height: 0; overflow: hidden; visibility: hidden; clear: both; } 即可解決此問題 2007/08/24 有新的解決方案 (謝巧巧) 因為 :after 這個屬性 ie6 讀不到 但 ie6 需要用到 _height: 1%; 去解決 float 的問題 所以有了更簡短的解決方案也不需要用到 :after 設定 #box { _height: 1%; overflow: hidden; _overflow: none; } 有但書,就是如果這個區塊有指定寬或高的話 overflow: hidden; 會把超出的文字硬是截斷 -- 而另外一個 float 的 bug 則是出現在 IE6 使用 float 區塊中的最後一個字元莫名出現了重複的字並且可能跳出了原框架內 似乎是因為 html 原始碼中的注釋造成的問題,但也無法確切證明 雖然 IE6 原本就時常出現奇怪的 bug 但這樣的 bug 的確讓人非常困擾 - 以上 -