CSS 布局 - 浮動實例

本頁提供常見的浮動案例。

網格 / 等寬的框

Box 1
Box 2
Box 1
Box 2
Box 3

通過使用 float 屬性，可以輕松地并排浮動內容框：

實例

* {
  box-sizing: border-box;
}
.box {
  float: left;
  width: 33.33%; /* 三個框（四框使用 25%，兩框使用 50%，以此類推） */
  padding: 50px; /* 如果需要在圖片間增加間距 */
}

親自試一試

什么是 box-sizing？

您可以輕松地并排創建三個浮動框。但是，當您添加一些內容來擴大每個框的寬度（例如，內邊距或邊框）時，這個框會損壞。 box-sizing 屬性允許我們在框的總寬度（和高度）中包括內邊距和邊框，確保內邊距留在框內而不會破裂。

您可以在我們的 CSS Box Sizing 這一章中學習有關 box-sizing 屬性的更多知識。

圖像并排

這種框格（The grid of boxes）也可以用來并排顯示圖像：

實例

.img-container {
  float: left;
  width: 33.33%; /* 三個框（四框使用 25%，兩框使用 50%，以此類推） */
  padding: 5px; /* 如果需要在圖片間增加間距 */
}

親自試一試

等寬的框

在上例中，您學習了如何以相等的寬度并排浮動框。但是，創建具有相同高度的浮動框并不容易。不過，快速解決方案是設置一個固定的高度，如下例所示：

Box 1

Some content, some content, some content

Box 2

Some content, some content, some content

Some content, some content, some content

Some content, some content, some content

實例

.box {
  height: 500px;
}

親自試一試

但是，這么做就失去了彈性。如果可以保證框中始終有相同數量的內容，那是可以的。但是很多時候，內容是不一樣的。如果您在手機上嘗試上例，則會看到第二個框的內容將顯示在框的外部。這是 CSS3 Flexbox 派上用場的地方 - 因為它可以自動拉伸框使其與最長的框一樣長：

實例

使用 Flexbox 創建彈性框：

Box 1 - 這是一些文本，以確保內容真的很高。這是一些文本，以確保內容真的很高。這是一些文本，以確保內容真的很高。這是一些文本，以確保內容真的很高。這是一些文本，以確保內容真的很高。
Box 2 - 我的高度將跟隨框 1。

親自試一試

Flexbox 的唯一問題是它在 Internet Explorer 10 或更早版本中不起作用。您可以在我們的 CSS Flexbox 章節中學習有關 Flexbox 布局模塊的更多知識。

導航菜單

將 float 與超鏈接列表一起使用，來創建水平菜單：

實例

親自試一試

Web 布局實例

使用 float 屬性完成整個 Web 布局也很常見：

實例

.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%;
}

親自試一試

更多實例

帶有邊框和外邊距的圖像浮動到段落的右側
讓圖像浮動到段落的右側。在圖像上添加邊框和外邊距。
帶標題的圖像浮動到右側
讓帶有標題的圖像向右浮動。
讓段落的第一個字母向左浮動
讓段落的第一個字母向左浮動并設置該字母的樣式。
用浮動創建一個網站
使用浮動創建帶有水平導航欄、頁眉、頁腳、左側導航欄和主要內容的首頁。

所有 CSS 浮動屬性

屬性 描述
box-sizing 定義元素的寬度和高度的計算方式：它們是否應包含內邊距和邊框。
clear 指定哪些元素可以在被清除的元素旁邊以及在哪一側浮動。
float 指定元素應如何浮動。
overflow 指定如果內容溢出元素框會發生什么情況。
overflow-x 指定當溢出元素的內容區域時，如何處理內容的左/右邊緣。
overflow-y 指定當溢出元素的內容區域時，如何處理內容的上/下邊緣。