clear
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 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: rgba(81, 81, 81, 0.6);
padding: 1em;
float: left;
}
.floated-right {
border: solid 10px #ffc129;
background-color: rgba(81, 81, 81, 0.6);
padding: 1em;
float: right;
height: 150px;
}
当应用于非浮动块时，它将非浮动块的边框边界移动到所有相关浮动元素外边界的下方。这个非浮动块的顶部外边距会折叠。
另一方面，两个浮动元素的垂直外边距将不会折叠。当应用于浮动元素时，它将底部元素的外边界边缘移动到所有相关的浮动元素外边界边缘的下方。这会影响后面浮动元素的布局，因为后面的浮动元素的位置无法高于它之前的元素。
要被清除的相关浮动元素指的是在相同块级格式化上下文中的前置浮动。
语法
css
/* 关键字值 */
clear: none;
clear: left;
clear: right;
clear: both;
clear: inline-start;
clear: inline-end;
/* 全局值 */
clear: inherit;
clear: initial;
clear: revert;
clear: revert-layer;
clear: unset;
值
none-
元素不会被向下移动以清除浮动。
left-
元素被向下移动以清除左浮动。
right-
元素被向下移动以清除右浮动。
both-
元素被向下移动以清除左右浮动。
inline-start-
元素被向下移动以清除其包含块的起始侧浮动，即 ltr 时清除左浮动，rtl 时清除右浮动。
inline-end-
元素被向下移动以清除其包含块的结束侧浮动，即 ltr 时清除右浮动，rtl 时清除左浮动。
Formal syntax
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%;
}
Specifications
| Specification |
|---|
| Cascading Style Sheets Level 2 # propdef-clear |
| CSS Logical Properties and Values Module Level 1 # float-clear |