clear CSS property
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.
The 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.
Try it
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;
}
Syntax
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;
Values
none-
Is a keyword indicating that the element is not moved down to clear past floating elements.
left-
Is a keyword indicating that the element is moved down to clear past left floats.
right-
Is a keyword indicating that the element is moved down to clear past right floats.
both-
Is a keyword indicating that the element is moved down to clear past both left and right floats.
inline-start-
Is a keyword indicating that the element is moved down to clear floats on start side of its containing block, that is the left floats on ltr scripts and the right floats on rtl scripts.
inline-end-
Is a keyword indicating that the element is moved down to clear floats on end side of its containing block, that is the right floats on ltr scripts and the left floats on rtl scripts.
Description
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.
Formal definition
| Initial value | none |
|---|---|
| Applies to | block-level elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | discrete |
Formal syntax
clear =
inline-start |
inline-end |
block-start |
block-end |
left |
right |
top |
bottom |
both-inline |
both-block |
both |
none
Examples
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%;
}
Specifications
| Specification |
|---|
| Cascading Style Sheets Level 2 # propdef-clear |
| CSS Logical Properties and Values Module Level 1 # float-clear |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
clear
|
|
|
|
|
|
|
|
|
|
|
|
|
both
|
|
|
|
|
|
|
|
|
|
|
|
|
inline-end
|
|
|
|
|
|
|
|
|
|
|
|
|
inline-start
|
|
|
|
|
|
|
|
|
|
|
|
|
left
|
|
|
|
|
|
|
|
|
|
|
|
|
none
|
|
|
|
|
|
|
|
|
|
|
|
|
right
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support