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 區塊呈現。