CSS float 浮動元素

CSS float 用來定義區塊的浮動,可以設定為靠左浮動或靠右浮動,常見用法像是文字繞圖片的特效或是 DIV 區塊排版上使用,在 CSS 設計上任何元素都是可以浮動的,像是 DIV 區塊、span圖片 ... 等。也許你常常看到這樣的版面配置,淡紫色的部分可以是圖片、影片、或其他你想放的東西,要做出這樣文字內容繞的圖片的效果,就可以使用 CSS float 的語法,此範例用的是 float:left,也就是淡紫色區塊靠左浮動,其他文字則在淡紫色區塊旁邊呈現,當文字量超過淡紫色區塊的高度時,就自動跑到區塊的下方繼續呈現。



請注意,這樣的效果浮動的是淡紫色區塊,而不是文字,所以 css float 語法要用在淡紫色區塊,文字僅是因為淡紫色區塊浮動,所以才繞著他呈現,接著我們來看看 css float 的基本語法,再看看實際應用該怎麼寫。

CSS float 浮動語法
float: 浮動方向;
CSS float 浮動方向可以用的值有 left(靠左浮動)、right(靠右浮動)、none(預設值,也就是不浮動)以及 inherit(繼承自父層的屬性),提醒一下最後的這個 inherit 盡量不要使用,避免 IE 不支援的情況發生。

CSS float 浮動語法範例
<style type="text/css">
#BigDiv{
 width:500px;
 height:190px;
 font-size:13px;
 color:#333333;
 line-height:22px;
}
#FloatDiv{
 width:200px;
 height:120px;
 background-color:#DBABFF;
 margin-right:10px;
 float:left;
}
</style>
<div id="BigDiv">
 <div id="FloatDiv"></div>
 文字繞著浮動的圖片、文字繞著浮動的圖片、文字繞著浮動的圖片、文字繞著浮動的圖片...
</div>
此段語法呈現結果,就會像本文開始的"文字繞著浮動淡紫色區塊範例"那樣,為了讓範例語法較為簡潔,我們省略的部分繁體中文"文字繞著浮動的圖片"的文字量,並使用了幾個常用到的 css 語法,例如 width 與 height 分別代表 DIV 區塊的寬度與高度,單位都是 px、font-size 區塊是內的文字大小、color 是文字顏色、background-color 則是 DIV 區塊的背景顏色。

整個範例的語法架構非常簡單,共有兩個 DIV 區塊,最外層的大 DIV 區塊 id 是 BigDiv,裡面包著一個 id 為 FloatDiv 的浮動 DIV 區塊以及一段繁體中文字串,最重要的地方在於 FloatDiv 區塊使用了用紅色標註的『float:left;』語法,讓瀏覽器(browser)知道此區塊要靠左邊浮動,BigDiv 區塊內的的其他文字則不需要使用 DIV 包起來,就會自然的繞著 FloatDiv 區塊呈現。

CSS float 常見應用延伸閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012
PHP Smarty MySQL JQuery Apache W3C