CSS float 屬性 · W3School CSS 參考手冊

# CSS float 屬性 ## 實例把圖像向右浮動： ``` img { float:right; } ``` ## 瀏覽器支持 | IE | Firefox | Chrome | Safari | Opera | | --- | --- | --- | --- | --- | 所有主流瀏覽器都支持 float 屬性。注釋：任何的版本的 Internet Explorer （包括 IE8）都不支持屬性值 "inherit"。 ## 定義和用法 float 屬性定義元素在哪個方向浮動。以往這個屬性總應用于圖像，使文本圍繞在圖像周圍，不過在 CSS 中，任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素。如果浮動非替換元素，則要指定一個明確的寬度；否則，它們會盡可能地窄。注釋：假如在一行之上只有極少的空間可供浮動元素，那么這個元素會跳至下一行，這個過程會持續到某一行擁有足夠的空間為止。 | 默認值： | none | | --- | --- | | 繼承性： | no | | --- | --- | | 版本： | CSS1 | | --- | --- | | JavaScript 語法： | _object_.style.cssFloat="left" | | --- | --- | ## 可能的值 | 值 | 描述 | | --- | --- | | left | 元素向左浮動。 | | right | 元素向右浮動。 | | none | 默認值。元素不浮動，并會顯示在其在文本中出現的位置。 | | inherit | 規定應該從父元素繼承 float 屬性的值。 | ## TIY 實例 [float 屬性的簡單應用](/tiy/t.asp?f=csse_float) 使圖像浮動于一個段落的右側。 ``` <html> <head> <style type="text/css"> img { float:right } </style> </head> <body> <p>在下面的段落中，我們添加了一個樣式為 <b>float:right</b> 的圖像。結果是這個圖像會浮動到段落的右側。</p> <p> <img src="/i/eg_cute.gif" /> This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. </p> </body> </html> ``` [將帶有邊框和邊界的圖像浮動于段落的右側](/tiy/t.asp?f=csse_float2) 使圖像浮動于段落的右側。向圖像添加邊框和邊界。 ``` <html> <head> <style type="text/css"> img { float:right; border:1px dotted black; margin:0px 0px 15px 20px; } </style> </head> <body> <p>在下面的段落中，圖像會浮動到右側，并且添加了點狀的邊框。我們還為圖像添加了邊距，這樣就可以把文本推離圖像：上和右外邊距是 0px，下外邊距是 15px，而圖像左側的外邊距是 20px。</p> <p> <img src="/i/eg_cute.gif" /> This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. </p> </body> </html> ``` [帶標題的圖像浮動于右側](/tiy/t.asp?f=csse_float3) 使帶有標題的圖像浮動于右側 ``` <html> <head> <style type="text/css"> div { float:right; width:120px; margin:0 0 15px 20px; padding:15px; border:1px solid black; text-align:center; } </style> </head> <body> <div> <img src="/i/eg_cute.gif" /><br /> CSS is fun! </div> <p> This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. </p> <p> 在上面的段落中，div 元素的寬度是 120 像素，它其中包含圖像。div 元素浮動到右側。我們向 div 元素添加了外邊距，這樣就可以把 div 推離文本。同時，我們還向 div 添加了邊框和內邊距。 </p> </body> </html> ``` [使段落的首字母浮動于左側](/tiy/t.asp?f=csse_float4) 使段落的首字母浮動于左側，并向這個字母添加樣式。 ``` <html> <head> <style type="text/css"> span { float:left; width:0.7em; font-size:400%; font-family:algerian,courier; line-height:80%; } </style> </head> <body> <p> <span>T</span>his is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. </p> <p> 在上面的段落中，文本的第一個字母包含在一個 span 元素中。這個 span 元素的寬度是當前字體尺寸的 0.7 倍。span 元素的字體尺寸是 400%，行高是 80%。span 中的字母字體是 "Algerian" </p> </body> </html> ``` [創建水平菜單](/tiy/t.asp?f=csse_float5) 使用具有一欄超鏈接的浮動來創建水平菜單。 ``` <html> <head> <style type="text/css"> ul { float:left; width:100%; padding:0; margin:0; list-style-type:none; } a { float:left; width:7em; text-decoration:none; color:white; background-color:purple; padding:0.2em 0.6em; border-right:1px solid white; } a:hover {background-color:#ff3300} li {display:inline} </style> </head> <body> <ul> <li><a href="#">Link one</a></li> <li><a href="#">Link two</a></li> <li><a href="#">Link three</a></li> <li><a href="#">Link four</a></li> </ul> <p> 在上面的例子中，我們把 ul 元素和 a 元素浮向左浮動。li 元素顯示為行內元素（元素前后沒有換行）。這樣就可以使列表排列成一行。ul 元素的寬度是 100%，列表中的每個超鏈接的寬度是 7em（當前字體尺寸的 7 倍）。我們添加了顏色和邊框，以使其更漂亮。 </p> </body> </html> ``` [創建無表格的首頁](/tiy/t.asp?f=csse_float6) 使用浮動來創建擁有頁眉、頁腳、左側目錄和主體內容的首頁。 ``` <html> <head> <style type="text/css"> div.container { width:100%; margin:0px; border:1px solid gray; line-height:150%; } div.header,div.footer { padding:0.5em; color:white; background-color:gray; clear:left; } h1.header { padding:0; margin:0; } div.left { float:left; width:160px; margin:0; padding:1em; } div.content { margin-left:190px; border-left:1px solid gray; padding:1em; } </style> </head> <body> <div class="container"> <div class="header"><h1 class="header">W3School.com.cn</h1></div> <div class="left"><p>"Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349)</p></div> <div class="content"> <h2>Free Web Building Tutorials</h2> <p>At W3School.com.cn you will find all the Web-building tutorials you need, from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.</p> <p>W3School.com.cn - The Largest Web Developers Site On The Net!</p></div> <div class="footer">Copyright 2008 by YingKe Investment.</div> </div> </body> </html> ``` ## 相關頁面 CSS 教程：[CSS 定位](/css/css_positioning.asp "CSS 定位 (Positioning)") HTML DOM 參考手冊：[cssFloat 屬性](/jsref/prop_style_cssfloat.asp "HTML DOM cssFloat 屬性")