1. Web
  2. CSS
  3. clear

clear

Baseline 廣泛可用 *

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來，各瀏覽器均已提供此特性。

* 此特性的某些部分可能存在不同級別的支援。

clear CSS 屬性指定一個元素是否必須被移動到前面 浮動 元素的下方（清除）。clear 屬性適用於浮動和非浮動元素。

試一試

clear: none;

clear: left;

clear: right;

clear: both;

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="floated-left">Left</div>
    <div class="floated-right">Right</div>
    <div class="transition-all" id="example-element">
      As much mud in the streets as if the waters had but newly retired from the
      face of the earth, and it would not be wonderful to meet a Megalosaurus,
      forty feet long or so, waddling like an elephantine lizard up Holborn
      Hill.
    </div>
  </div>
</section>

.example-container {
  border: 1px solid #c5c5c5;
  padding: 0.75em;
  text-align: left;
  line-height: normal;
}

.floated-left {
  border: solid 10px #ffc129;
  background-color: rgb(81 81 81 / 0.6);
  padding: 1em;
  float: left;
}

.floated-right {
  border: solid 10px #ffc129;
  background-color: rgb(81 81 81 / 0.6);
  padding: 1em;
  float: right;
  height: 150px;
}

當應用於非浮動塊時，它將元素的 邊框邊緣 向下移動，直到它位於所有相關浮動元素的 外邊距邊緣 之下。非浮動塊的頂部外邊距會摺疊。

另一方面，兩個浮動元素之間的垂直外邊距不會摺疊。當應用於浮動元素時，底部元素的外邊距邊緣會移動到所有相關浮動元素的外邊距邊緣之下。這會影響後續浮動元素的位置，因為後續浮動元素不能定位得比前面的元素高。

需要被清除的相關浮動元素是同一 塊級格式化上下文 中較早的浮動元素。

注意：如果一個元素只包含浮動元素，它的高度會摺疊為零。如果你希望它始終能夠調整大小，以便包含內部的浮動元素，請將其 display 屬性的值設定為 flow-root。

css
#container {
  display: flow-root;
}

語法

css
/* Keyword values */
clear: none;
clear: left;
clear: right;
clear: both;
clear: inline-start;
clear: inline-end;

/* Global values */
clear: inherit;
clear: initial;
clear: revert;
clear: revert-layer;
clear: unset;

值

none

這是一個關鍵詞，表示元素不會向下移動以清除浮動元素。

left

這是一個關鍵詞，表示元素向下移動以清除左側浮動元素。

這是一個關鍵詞，表示元素向下移動以清除右側浮動元素。

both

這是一個關鍵詞，表示元素向下移動以清除左右兩側浮動元素。

inline-start

這是一個關鍵詞，表示元素向下移動以清除其包含塊的起始側的浮動元素，即在從左到右 (ltr) 指令碼中為左側浮動元素，在從右到左 (rtl) 指令碼中為右側浮動元素。

inline-end

這是一個關鍵詞，表示元素向下移動以清除其包含塊的結束側的浮動元素，即在從左到右 (ltr) 指令碼中為右側浮動元素，在從右到左 (rtl) 指令碼中為左側浮動元素。

正式定義

初始值none
應用於塊級元素
繼承性否
計算值同指定值
動畫型別離散

正式語法

clear = 
  inline-start  |
  inline-end    |
  block-start   |
  block-end     |
  left          |
  right         |
  top           |
  bottom        |
  both-inline   |
  both-block    |
  both          |
  none

示例

clear: left

HTML

html
<div class="wrapper">
  <p class="black">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet
    diam. Duis mattis varius dui. Suspendisse eget dolor.
  </p>
  <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
  <p class="left">This paragraph clears left.</p>
</div>

CSS

css
.wrapper {
  border: 1px solid black;
  padding: 10px;
}
.left {
  border: 1px solid black;
  clear: left;
}
.black {
  float: left;
  margin: 0;
  background-color: black;
  color: white;
  width: 20%;
}
.red {
  float: left;
  margin: 0;
  background-color: pink;
  width: 20%;
}
p {
  width: 50%;
}

clear: right

HTML

html
<div class="wrapper">
  <p class="black">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet
    diam. Duis mattis varius dui. Suspendisse eget dolor.
  </p>
  <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
  <p class="right">This paragraph clears right.</p>
</div>

CSS

css
.wrapper {
  border: 1px solid black;
  padding: 10px;
}
.right {
  border: 1px solid black;
  clear: right;
}
.black {
  float: right;
  margin: 0;
  background-color: black;
  color: white;
  width: 20%;
}
.red {
  float: right;
  margin: 0;
  background-color: pink;
  width: 20%;
}
p {
  width: 50%;
}

clear: both

HTML

html
<div class="wrapper">
  <p class="black">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet
    diam. Duis mattis varius dui. Suspendisse eget dolor. Fusce pulvinar lacus
    ac dui.
  </p>
  <p class="red">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet
    diam. Duis mattis varius dui. Suspendisse eget dolor.
  </p>
  <p class="both">This paragraph clears both.</p>
</div>

CSS

css
.wrapper {
  border: 1px solid black;
  padding: 10px;
}
.both {
  border: 1px solid black;
  clear: both;
}
.black {
  float: left;
  margin: 0;
  background-color: black;
  color: white;
  width: 20%;
}
.red {
  float: right;
  margin: 0;
  background-color: pink;
  width: 20%;
}
p {
  width: 45%;
}

規範

規範
層疊樣式表級別 2
# propdef-clear
CSS 邏輯屬性和值第 1 級
# float-clear

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面由 MDN 貢獻者 最後修改於 。

在 GitHub 上檢視此頁面 • 報告此內容的問題
© . Content available under a Creative Commons license.