CSS float 浮動 - 網頁設計教學站

CSS float 浮動功能用來設定網頁中各獨立元素與其他元素的關係，特別是 DIV 區塊的浮動排版更加實用，float 可以讓圖片、區塊、影片、欄位、表單、表格 ... 等元素，進行浮動排列，透過 DIV 將各元素區塊劃分出來再結合 float 進行排版，是一種常見的網頁排版計巧，新一代的多欄式網頁規劃，也採用 float 的技巧而非傳統的 table 表格計巧，幾乎所有的主流瀏覽器都支援 css float 浮動技巧。

CSS float 浮動基本語法

float:浮動參數;

基本語法中的浮動參數有 left、right 以及 none，『float:left;』代表向左浮動，『float:right;』代表像右浮動，而『float:none;』則代表元素不要浮動，在 DIV 區域使用 float 技巧，通常還會搭配 DIV 的寬度，來達成每個 DIV 正確排列的效果。

CSS float 浮動範例、讓兩個 DIV 區塊並排

以上範例呈現

我們將兩個 DIV 區塊透過 float 製作出並排效果，首先粉紅色的區塊使用了 float 之後，橘色區塊就會跑到原本粉紅色區塊的位置，並且被粉紅色的區塊蓋住，為了避免兩個 DIV 重疊，所以在橘色的 DIV 也使用 float 的技巧，讓他可以自動與粉紅色 DIV 產生推擠效果，自然而然就並排在一起了，這就是 css float 的基本浮動效果，熟悉後即可使用於 DIV 所劃分的各個網頁區塊排版。

延伸閱讀