清除

**clear** CSS 属性设置元素是否必须移到其前面出现的浮动元素下方（清除）。clear 属性适用于浮动和非浮动元素。

试一试

当应用于非浮动块时，它会将元素的边框边缘向下移动，直到它位于所有相关浮动元素的外边距边缘下方。非浮动块的顶部外边距会发生折叠。

另一方面，两个浮动元素之间的垂直外边距不会折叠。当应用于浮动元素时，底部元素的外边距边缘会向下移动到所有相关浮动元素的外边距边缘下方。这会影响后续浮动元素的位置，因为后续浮动元素不能定位到比先前浮动元素更高的位置。

需要清除的相关浮动元素是同一块级格式化上下文中的先前浮动元素。

注意：如果一个元素只包含浮动元素，则其高度会折叠为零。如果您希望它始终能够调整大小，以便包含其中的浮动元素，请将元素的 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: left
right: right
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: #fff;
  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: #fff;
  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: #fff;
  width: 20%;
}
.red {
  float: right;
  margin: 0;
  background-color: pink;
  width: 20%;
}
p {
  width: 45%;
}

规范

规范
层叠样式表级别 2 修订版 2 (CSS 2.2) 规范 # propdef-clear
CSS 逻辑属性和值级别 1 # float-clear

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅

CSS 基本盒子模型