Month: May 2007

這篇是在講 Clearing floats。情況是有有個 #container1，包了 #block1 與 #block2：

<div id="container1">
    <div id="block1">content</div>
    <div id="block2">content</div>
</div>
<div id="container2"></div>

其中 #block1 與 #block2 都設有浮動 (float) 屬性：

#block1 { float: left; width: 50%; }
#block2 { float: left; width: 45%; }

另外 #container2 裡面也許會有其他的浮動屬性，但是你不想將 #container2 裡面的東西跑到 #container1 的右邊，所以對兩個 container 用 clear: both 處理：

#container1, #container2 { clear: both; }

現在想要對 #container1 設定 margin-bottom，使之與 #container2 有邊距：

#container1 { clear: both;
              margin-bottom: 1em; }

但這樣是不會動的，#container1 要加上 overflow 屬性 (參考原文內容)：

#container1 { clear: both;
              margin-bottom: 1em;
              overflow: hidden; }

不過這樣的話 IE6 還是不會動，所以要再加上：

#container1 { clear: both;
              margin-bottom: 1em;
              overflow: hidden;
              width: 100%; }

理論上這樣就可以解決這些問題了... (真是麻煩 :/)