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%; }

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

This entry was posted in Browser, Computer, CSS, Murmuring, Network, Software, WWW. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *