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.