DIV 浮動技巧

這篇可以說是 float 的延伸，在 CSS 中 float 是用來宣告元素浮動用的，如果想了解可以參考此篇：CSS float 浮動元素。本篇不針對浮動元素的使用方式介紹，專注於 DIV 區塊的浮動技巧說明。

假設有兩個 DIV 區塊，希望透過浮動的技巧讓兩的 DIV 可以水平排列，如下圖這樣：

DIV 區塊浮動示意語法

#DIV_A {
　float:left;
}
#DIV_B {
　float:left;
}

假設左邊藍色區塊為 DIV_A，右邊綠色區塊為 DIV_B，想要讓這兩個區塊水平排列在一起，可以使用 float 浮動技巧，分別設定 float:left 讓元素各自靠左浮動，這樣就可以做 DIV 出水平排列的效果囉！你也可以搭配 position 來定位 DIV 區塊的位置。

延伸閱讀
CSS float 浮動元素
CSS DIV 區塊標籤的使用教學
CSS clear 用法介紹
CSS position 位置屬性（定位）