clear
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
clear
CSS 属性指定一个元素是否必须移动 (清除浮动后) 到在它之前的浮动元素下面。clear
属性适用于浮动和非浮动元素。
尝试一下
语法
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: 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 Revision 2 (CSS 2.2) Specification # propdef-clear |
CSS Logical Properties and Values Level 1 # float-clear |
浏览器兼容性
BCD tables only load in the browser