The clear
CSS property specifies whether an element can be next to floating elements that precede it or must be moved down (cleared) below them. The clear
property applies to both floating and non-floating elements.
clear: none; clear: left; clear: right; clear: both; clear: inline-start; clear: inline-end; clear: inherit;
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. This movement (when it happens) causes margin collapsing not to occur.
When applied to floating elements, it moves the margin edge of the element 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.
Note: 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 clear
a replaced ::after
pseudo-element on it.
#container::after { content: ""; display: block; clear: both; }
Initial value | none |
---|---|
Applies to | block-level elements |
Inherited | no |
Media | visual |
Computed value | as specified |
Animation type | discrete |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Syntax
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.
Formal syntax
none | left | right | both | inline-start | inline-end
Examples
clear: left
HTML Content
<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 Content
.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: red; width:20%; } p { width: 50%; }
clear: right
HTML Content
<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 Content
.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: red; width:20%; } p { width: 50%; }
clear: both
HTML Content
<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 Content
.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: red; width:20%; } p { width: 45%; }
Specifications
Specification | Status | Comment |
---|---|---|
CSS Logical Properties Level 1 The definition of 'float and clear' in that specification. |
Editor's Draft | Adds the values inline-start and inline-end |
CSS Level 2 (Revision 1) The definition of 'clear' in that specification. |
Recommendation | No significant changes, though details are clarified. |
CSS Level 1 The definition of 'clear' in that specification. |
Recommendation | Initial definition |
Browser compatibility
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 1.0 | (Yes) | 1.0 (1.7 or earlier) | 4.0 | 3.5 | 1.0 |
inline-start , inline-end |
No support | No support | 55 (55) | No support | No support | No support |
Feature | Android | Edge | Firefox Mobile (Gecko) | Firefox OS | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|
Basic support | 1.0 | (Yes) | 1.0 (1) | 1.0 | 6.0 | 6.0 | 1.0 |
inline-start , inline-end |
No support | No support | 55.0 (55) | 2.5 | No support | No support | No support |