[color=#990000]一、《FLOAT：浮動》觀念說明[/color]

網頁設計中，DIV的特性會自成一行，也就是說若沒有做特別設定，每個DIV會自動換行到下一列，若想要讓不同的DIV排列整齊並且橫向排列時，則FLOAT會是一個很好的選擇。

我們可以使用FLOAT來設定靠左或靠右的屬性，使DIV能有更多不同彈性的排版選擇。

[color=#990000]二、《FLOAT：浮動》使用說明[/color]

[color=#663300]1.兩欄以上的網頁編排設定[/color]

想要完成左右兩欄的網頁版面，光設定寬高並沒有作用，因為 Div 標籤的特性是會「自成一排」， 不管寬度是大是小，排列方式永遠是由上往下依序排列。若想要讓 Div 標籤可以左右並排，則必須仰賴「float」屬性的幫忙。

基本語法：
.box { float: left; width: 315px; margin-right: 20px; }
特別注意：用浮動屬性排版，基本上一定要加上「寬度 width」的設定才會生效。這是因為若沒有設定寬度，DIV區塊會預設會佔有100%的寬度，這樣接下來的DIV區塊就會「換行」，也就失去了「浮動排版」的意義。

另外，一般在使用 float 時，也會加上右或左的「邊距 margin」設定。這是為了讓平行區塊間有所間隔，以保持版面的協調。

[color=#663300]2.繞圖排文的設定[/color]

例如將某圖片設定為 float:left (向左浮動)，則圖片下方的文字或元素都會向上靠齊到圖片右側的空白處，就完成文繞圖的設定了。

[color=#990000]三、《FLOAT：浮動》實例解說[/color]

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/float-1.jpg[/IMG]


區塊DIV build的寫法：

1.FLOAT浮動設定：DIV的樣式：CLASS命名為build，將DIV的浮動屬性設定靠左，寫成 float: left;
2.MARGIN邊界設定：DIV與DIV之間的邊距為21px，margin-right: 21px;

圖示：

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/al-1.jpg[/IMG]


CSS語法如下：

.build { float: left; margin-right: 21px; width: 315px; }
待續...



(編輯記錄)