CSS 佈局 - Float 示例
本頁包含常見的 float 示例。
網格盒/等寬盒
盒 1
盒 2
盒 1
盒 2
盒 3
使用 float 屬性，可以輕鬆地將內容盒並排放置。
示例
* {
box-sizing: border-box;
}
.box {
float: left;
width: 33.33%; /* 三個盒（四個盒用 25%，兩個盒用 50% 等）*/
padding: 50px; /* 如果要在圖片之間留白 */
}
自己動手試一試 »
什麼是 box-sizing？
您可以輕鬆地並排放置三個浮動盒。但是，當您新增會增大每個盒寬度（例如 padding 或 border）的元素時，該盒就會損壞。 box-sizing 屬性允許我們將 padding 和 border 包含在盒的總寬度（和高度）內，從而確保 padding 保持在盒內且不會導致損壞。
您可以在我們的 CSS Box Sizing 章中瞭解更多關於 box-sizing 屬性的資訊。
圖片並排
盒網格也可用於並排顯示圖片。
示例
.img-container {
float: left;
width: 33.33%; /* 三個容器（四個容器用 25%，兩個容器用 50% 等）*/
padding: 5px; /* 如果要在圖片之間留白 */
}
自己動手試一試 »
等高盒
在上一個示例中，您學習瞭如何使盒並排放置並具有相等的寬度。但是，建立等高的浮動盒並不容易。一個快速修復方法是設定一個固定高度，如下例所示：
盒 1
一些內容，一些內容，一些內容
盒 2
一些內容，一些內容，一些內容
一些內容，一些內容，一些內容
一些內容，一些內容，一些內容
但是，這不夠靈活。如果您能確保盒的內容始終相同，那就可以了。但很多時候，內容並不相同。如果您在手機上嘗試上面的示例，您會看到第二個盒子的內容會顯示在盒子外面。這時 CSS3 Flexbox 就派上用場了——它可以自動拉伸盒子，使其長度與最長的盒子一樣長。
示例
使用 Flexbox 建立彈性盒
提示： 您可以在我們的 CSS Flexbox 章中瞭解更多關於 Flexbox 佈局模組的資訊。
導航選單
您還可以使用 float 和超連結列表來建立水平選單。
網頁佈局示例
使用 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 的網站
使用 float 建立一個包含導航欄、頁首、頁尾、左側內容和主內容的首頁。
所有 CSS Float 屬性
| 屬性 | 描述 |
|---|---|
| box-sizing | 定義元素的寬度和高度如何計算：是否包含內邊距和邊框 |
| 清除 | 指定與浮動元素相鄰的元素應該發生什麼 |
| float | 指定元素應該向左、向右浮動，還是不浮動 |
| overflow | 指定內容溢位元素框時會發生什麼 |
| overflow-x | 指定內容在溢位元素內容區域時，其左/右邊緣應如何處理 |
| overflow-y | 指定內容在溢位元素內容區域時，其上/下邊緣應如何處理 |
