clear
CSS
property sets whether an element must be moved below (cleared)
floating
elements that precede it. The
clear
property applies to floating and non-floating elements.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
When applied to non-floating blocks, it moves the border edge of the element down until it is below the margin edge of all relevant floats. The non-floated block's top margin collapses.
Vertical margins between two floated elements on the other hand will not collapse. When applied to floating elements, the margin edge of the bottom element is moved below the margin edge of all relevant floats. This affects the position of later floats, since later floats cannot be positioned higher than earlier ones.
The floats that are relevant to be cleared are the earlier floats within the same block formatting context .
If an element contains only floated elements, its height collapses to nothing. If you want it to always be able to resize, so that it contains floating elements inside it, you need to self-clear its children. This is called
clearfix
, and one way to do it is to add
clear
to a replaced
::after
pseudo-element
on it.
#container::after {
content: "";
display: block;
clear: both;
}
/* Keyword values */ clear: none; clear: left; clear: right; clear: both; clear: inline-start; clear: inline-end; /* Global values */ clear: inherit; clear: initial; clear: unset;
none
left
right
both
inline-start
inline-end
| 初始值 |
none
|
|---|---|
| 适用于 | block-level elements |
| 继承 | no |
| 计算值 | 如指定 |
| 动画类型 | discrete |
none | left | right | both | inline-start | inline-end
<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>
.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%;
}
<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>
.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%;
}
<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>
.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%;
}
| 规范 | 状态 | 注释 |
|---|---|---|
|
CSS Logical Properties and Values Level 1
The definition of 'float and clear' in that specification. |
编者草案 |
Adds the values
inline-start
and
inline-end
|
|
CSS Level 2 (Revision 1)
The definition of 'clear' in that specification. |
推荐 | No significant changes, though details are clarified. |
|
CSS Level 1
The definition of 'clear' in that specification. |
推荐 | 初始定义 |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
clear
|
Chrome 完整支持 1 | Edge 完整支持 12 | Firefox 完整支持 1 | IE 完整支持 4 | Opera 完整支持 3.5 | Safari 完整支持 1 | WebView Android 完整支持 1 | Chrome Android 完整支持 18 | Firefox Android 完整支持 4 | Opera Android 完整支持 10.1 | Safari iOS 完整支持 1 | Samsung Internet Android 完整支持 1.0 |
Flow-relative values
inline-start
and
inline-end
|
Chrome 不支持 No | Edge 不支持 No | Firefox 完整支持 55 | IE 不支持 No | Opera 不支持 No | Safari 不支持 No | WebView Android 不支持 No | Chrome Android 不支持 No | Firefox Android 完整支持 55 | Opera Android 不支持 No | Safari iOS 不支持 No | Samsung Internet Android 不支持 No |
完整支持
不支持