CSS - clear

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.

Examples

Example1

The div with 'wrapper' class add a border for a better visility of the utility of clear property

clear: left

HTML Content

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 Content

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: red;
    width:20%;
}
p {
    width: 50%;
}

clear: right

HTML Content

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 Content

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: red;
    width:20%;
}
p {
    width: 50%;
}

clear: both

HTML Content

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 Content

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: red;
    width:20%;
}
p {
    width: 45%;
}

Syntax  

CSS
clear: none;
clear: left;
clear: right;
clear: both;
clear: inline-start;
clear: inline-end;

clear: inherit;

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

CSS
none <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> left <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> right <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> both <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> inline-start <a title="Single bar" href="css/value_definition_syntax#single_bar">|</a> inline-end

Description  

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.

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 you want an element to contain all floating elements inside it, you can either float the container as well, or use clear on a replaced ::after pseudo-element on it.

CSS
#container::after { 
   content: "";
   display: block; 
   clear: both;
}

Initial valuenone
Applies toblock-level elements
Inheritedno
Mediavisual
Computed valueas specified
Animatableno
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Browser Compatibility  

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 1.0 (1.7 or earlier) 4.0 3.5 1.0
inline-start, inline-end No support 45 (45) [1] No support No support No support
Feature Android Firefox Mobile (Gecko) Firefox OS IE Phone Opera Mobile Safari Mobile
Basic support 1.0 1.0 (1) 1.0 6.0 6.0 1.0
inline-start, inline-end No support 45.0 (45) [1] 2.5 No support No support No support

[1] Enabled by default on Nightly and Aurora (Dev edition); to activate it on a release or beta version, you need to flip the layout.css.float-logical-values.enabled to true.

See Also  

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

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/clear

CSS CSS Positioning CSS Property Reference