CSS float 屬性
更多“自己嘗試”的例子見下文。
定義和用法
float 屬性指定元素是否應向左、向右浮動，或者不浮動。
注意：絕對定位的元素會忽略 float 屬性！
注意：浮動元素旁邊的元素將圍繞它流動。要避免這種情況，請使用 clear 屬性或 clearfix 技巧（參見本頁底部示例）。
瀏覽器支援
表中的數字指定了完全支援該屬性的第一個瀏覽器版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| float | 1.0 | 4.0 | 1.0 | 1.0 | 7.0 |
CSS 語法
float: none|left|right|initial|inherit;
屬性值
| 值 | 描述 | 演示 |
|---|---|---|
| none | 元素不浮動，（將只顯示在文字中出現的位置）。這是預設值 | 演示 ❯ |
| left | 元素在其容器的左側浮動 | 演示 ❯ |
| right | 元素在其容器的右側浮動 | 演示 ❯ |
| initial | 將此屬性設定為其預設值。閱讀關於initial | |
| inherit | 從其父元素繼承此屬性。閱讀關於inherit |
更多示例
示例
讓段落的第一個字母向左浮動並設定該字母的樣式
span {
float: left;
width: 0.7em;
font-size: 400%;
font-family: algerian, courier;
line-height: 80%;
}
自己動手試一試 »
示例
使用 float 建立包含超連結列表的水平選單
.header, .footer {
background-color: grey;
color: white;
padding: 15px;
}
.column {
float: left;
padding: 15px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.menu {width: 25%;}
.content {width: 75%;}
自己動手試一試 »
示例
使用 float 建立一個包含頁首、頁尾、左側內容和主內容的首頁
.header, .footer {
background-color: grey;
color: white;
padding: 15px;
}
.column {
float: left;
padding: 15px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.menu {width: 25%;}
.content {width: 75%;}
自己動手試一試 »
示例
如果浮動元素的高度大於其容器元素，它將溢位容器外部。可以使用“clearfix hack”來修復此問題
.clearfix::after {
content: "";
clear: both;
display: table;
}
自己動手試一試 »
相關頁面
CSS 教程：CSS Float
HTML DOM 參考： cssFloat 屬性
