web前端學習筆記，實踐篇（四）CSS布局

在實際項目的開發中，我們用到的，可能最多的布局方式，是浮動布局。其實布局，還有一種，絕對位置。

在網頁技術中，我們可以把整個所視見的平面，看做是一張紙，而我們所需要畫的格子，則可以通過float這個屬性，來排列。float有四個屬性，分別為left、right、inherit、none。在編寫基於浮動的頁面時，應該還需要注意清除浮動，需要定義一個樣式類。.clear{clear:both;}。如何清除浮動？只需要在結構中，添加一行空的結構，例子：

<div class="nav">

　　<結構一>

　　<結構二>

　　<div class="clear"></div>

</div>

在浮動布局中，left屬性，則是在遊覽器最左側。right屬性，則是在遊覽器最右側。建議：在同dom中，最好不要left right混搭，應該以一個屬性為基準。

絕對位置，這種布局方式，更多的是出現在DHTML中，它的屬性義所在範圍僅在父結構中所定義的position:relative;中。例子如下：

position:absolute; position:relative;屬性，都有四個可選的值，分別是top left right bottom，它們分別與離它最近的父容器的relative屬性掛鈎。當然，值有正負。

.nav{width:965px; height:100px; position:relative;}

.dell{width:200px;height:200px;position:absolute;}

<div class="nav">

　　<div class="dell"></div>

</div>

dell這個div，它可以在寬為965px，高為100px的div中活動（可以想象一下，它是在其中活動的，四個座標選值。）

補充：position屬性中還有一個選值,position:fixed 它的作用，是定義固定在遊覽器中，不會隨著滾動而【跑路】。