WEBTECH 網頁設計教學站
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 style="width:200px;height:60px;float:left;background-color:#FFD4D4;"></div>
<div style="width:200px;height:60px;float:left;background-color:#FFD382;"></div>
以上範例呈現
我們將兩個 DIV 區塊透過 float 製作出並排效果,首先粉紅色的區塊使用了 float 之後,橘色區塊就會跑到原本粉紅色區塊的位置,並且被粉紅色的區塊蓋住,為了避免兩個 DIV 重疊,所以在橘色的 DIV 也使用 float 的技巧,讓他可以自動與粉紅色 DIV 產生推擠效果,自然而然就並排在一起了,這就是 css float 的基本浮動效果,熟悉後即可使用於 DIV 所劃分的各個網頁區塊排版。

延伸閱讀

連絡我們