Gea-Suan Lin's BLOG

Tuesday, May 29, 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%; }

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