如果我們要進行css的布局，那float（浮動）就是最為關鍵的乙個屬性了。浮動可以使你的塊元素不遵守元素流的布局特性，如果不採用浮動，元素將乙個接乙個地往下排列。float屬性有三個值：left、right和none，後面我們就會使用這些值的。我們將使用事例來說明布局的特性。
我們做乙個html檔案，為後面的講解準備一下：
<
body
>
<
divid
="masthead"
>masthead
div>
<
divid
="sidebar_a"
>sidebar_a
div>
<
divid
="sidebar_b"
>sidebar_b
div>
<
divid
="content"
>content
div>
<
divid
="footer"
>footer
div>
body
>
這樣的html使用瀏覽器開啟一定是就幾個字元把，我們先加一些簡單的css來標記，這樣可以更加清楚地看到頁面的布局。
body
div
#masthead
#sidebar_a
#sidebar_b
#content
#footer
我們給每乙個div加上了乙個邊框，並給每乙個div使用上背景顏色，方便標誌。
masthead
sidebar_a
sidebar_b
content
footer
上面5個div，分別代表了網頁模板裡面最常見的表頭、表尾、兩個邊欄和中間的內容。現在還沒有新增更多的css，所以還只是5個從上到下的div而已。我們先分析一下，首先表頭masthead和表尾footer兩部分已經基本符合要求了，不會需要做更多的改變，那就是中間的兩個邊欄sidebar和內容content需要從左往右排列，我們先看看完成的css和布局的樣子：
masthead
sidebar_a
sidebar_b
content
footer
#masthead
#sidebar_a
#sidebar_b
#content
#footer
首先說明一下，所有的html沒有作任何修改，只是新增了一些css。
比較前面和後面的css，masthead和content裡面的內容沒有什麼改變，content裡面的height:150px;只是為了說明內容較多情況下會是怎麼樣的情況。關鍵就是sidebar_a內的float:left;和sidebar_b內的float:right;。正是這兩個屬性使我們的布局順利完成了。大家還可以自己嘗試一下，把sidebar_a和sidebar_b內的屬性換一下，兩個邊欄的位置就對換了，這個正體現了div+css布局的靈活性。
masthead
sidebar_a
sidebar_b
content
footer
我們別忘記了在表尾footer內有clear:both;屬性，這個屬性又是做什麼的呢？浮動使用了以後會對後面的元素造成影響，所以要清理掉。
注意：上面的html裡面的五個div不能順便的變換位置，不然就不能正常地顯示。特別是content要在兩個邊欄的後面。
上面只是簡單地說明了div的布局，大家要熟練使用還是自己多多練習了。
Css Div布局學習（二） 清理Clear
我們在css div布局學習 一 div布局基礎 這篇文章裡面講解了基本的布局方法，footer內有clear both 屬性就一句帶過了，事後想了一下對於清理還是有些話要講清楚的。那我就開闢一篇專門講一下。masthead sidebar a sidebar b content footer 這個...
Css Div布局學習（四） 關於hack
並不是每乙個瀏覽器都可以正確顯示設定的css，那有什麼辦法可以讓一些css使每乙個流行的瀏覽器都可以一致的顯示出網頁。哈哈，世界上真的有這麼好的事情，可以將一些不相容的情況統一，這一類都叫做css hack。我下面就簡單得介紹乙個css hack。在任何標準相容的瀏覽器中，針對包含其它元素的元素，其...
Css Div布局學習（四） 關於hack
並不是每乙個瀏覽器都可以正確顯示設定的css，那有什麼辦法可以讓一些css使每乙個流行的瀏覽器都可以一致的顯示出網頁。哈哈，世界上真的有這麼好的事情，可以將一些不相容的情況統一，這一類都叫做css hack。我下面就簡單得介紹乙個css hack。在任何標準相容的瀏覽器中，針對包含其它元素的元素，其...