CSS 布局 - 浮動和清除

CSS 布局 - 浮動和清除

CSS float 屬性規定元素如何浮動。

CSS clear 屬性規定哪些元素可以在清除的元素旁邊以及在哪一側浮動。

float 屬性

float 屬性用于定位和格式化內容，例如讓圖像向左浮動到容器中的文本那里。

float 屬性可以設置以下值之一：

  • left - 元素浮動到其容器的左側
  • right - 元素浮動在其容器的右側
  • none - 元素不會浮動（將顯示在文本中剛出現的位置）。默認值。
  • inherit - 元素繼承其父級的 float 值

最簡單的用法是，float 屬性可實現（報紙上）文字包圍圖片的效果。

實例 - float: right;

下例指定圖像應在文本中向右浮動：

Pineapple

領先的 Web 技術教程 - 全部免費。在 CodeW3C.com，你可以找到你所需要的所有的網站建設教程。從基礎的 HTML 到 CSS，乃至進階的 XML、SQL、JS、PHP。

我們的參考手冊涵蓋了網站技術的方方面面。其中包括W3C標準技術：HTML、CSS、XML 。以及其他技術，諸如 JavaScript、PHP、SQL 等。

在 CodeW3C.com，我們提供上千個實例。通過使用我們的在線編輯器，你可以編輯這些例子，并對代碼進行實驗。

實例

img {
  float: right;
}

親自試一試

實例 - float: left;

下例指定圖像應在文本中向左浮動：

Pineapple

領先的 Web 技術教程 - 全部免費。在 CodeW3C.com，你可以找到你所需要的所有的網站建設教程。從基礎的 HTML 到 CSS，乃至進階的 XML、SQL、JS、PHP。

我們的參考手冊涵蓋了網站技術的方方面面。其中包括W3C標準技術：HTML、CSS、XML 。以及其他技術，諸如 JavaScript、PHP、SQL 等。

在 CodeW3C.com，我們提供上千個實例。通過使用我們的在線編輯器，你可以編輯這些例子，并對代碼進行實驗。

實例

img {
  float: left;
}

親自試一試

實例 - No float

在下例中，圖像將顯示在文本中剛出現的位置（float: none;）：

Pineapple 領先的 Web 技術教程 - 全部免費。在 CodeW3C.com，你可以找到你所需要的所有的網站建設教程。從基礎的 HTML 到 CSS，乃至進階的 XML、SQL、JS、PHP。 我們的參考手冊涵蓋了網站技術的方方面面。其中包括W3C標準技術：HTML、CSS、XML 。以及其他技術，諸如 JavaScript、PHP、SQL 等。 在 CodeW3C.com，我們提供上千個實例。通過使用我們的在線編輯器，你可以編輯這些例子，并對代碼進行實驗。

實例

img {
  float: none;
}

親自試一試

延伸閱讀

課外書：CSS 浮動