XHTML+CSS利用浮動與定位進行網頁布局

css|xhtml|浮動|網頁

最近在做一篇文檔，有關xhtml與css的，看了不少資料，這裡先把總結的東西寫一點出來。先說的是div+css的問題，最基本的，怎樣使用它們來布局。

浮動

CSS允許任何元素浮動float，不論是映像，段落還是列表。無論先前元素是什麼狀態，浮動後都成為區塊層級元素。浮動元素的寬度預設為auto。

浮動有一系列控制它的規則。
1.浮動元素的外邊緣不會超過其父元素的內邊緣。
2.浮動元素不會互相重疊。
3.浮動元素不會上下浮動。
4.如果一個浮動元素在另一個浮動元素之後顯示，而且會超出容納塊，則它下降到低於先前任何浮動元素的位置。說簡單點就是沒有空間的話，就另起一行。

下面是一個例子：

<div id="main">
  <div id="box1">box1</div>
  <div id="box2">box2</div>
  <div class="clear"></div>
</div>

#main{ width:100%; }
#box1{ float:left; width:40%;}
#box2{ float:right; width:60%;}
.clear{ clear:both;}

這是一個一行兩列的例子，其中clear的作用是不讓浮動元素下面的元素環繞在它周圍。

定位

position，我們通常用到的是絕對(absolute)和相對(relative)定位，運用這些定義，同樣可以進行布局，做出上面一行兩列的例子。

<div id="main">
  <div id="box1">box1</div>
  <div id="box2">box2</div>
</div> 

#main{ position:relative;width:100%;}
#box1{ position:absolute; top:0; left:0; width:40%;}
#box2{position:absolute; top:0; right:0; width:60%;}

通常，做快顯功能表的時候，我會用到定位，父元素相對定位position:relative，其中的子項目絕對位置position:absolute，通過top，right，bottom，left的值來控制子項目的位置，要注意的是子項目的位置將相對於父元素，而不是整個頁面。

浮動與定位的區別

通過定位雖然也可以進行布局，但是它的特點決定了它不適合做頁面的布局，因為被定義的元素在普通文檔中佔有的任何空間都將被關閉，可以說，它是漂浮在整個頁面上面的，所以，它可以和頁面上其他的內容重疊顯示。

這個特點可以方便的讓我們做出其他特殊的效果，但是相對與浮動就布局來說，我們更多的還是用浮動。