mozilla
Your Search Results

    clear

    Summary

    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.

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

    Syntax

    clear: none;
    clear: left;
    clear: right;
    clear: both;
    
    clear: inherit;
    

    Values

    none
    The element is not moved down to clear past floating elements.
    left
    The element is moved down to clear past left floats.
    right
    The element is moved down to clear past right floats.
    both
    The element is moved down to clear past both left and right floats.

    Formal syntax

    none | left | right | both

    Examples

    clear: left

    HTML Content

    <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. Praesent ullamcorper, turpis ut tempus tincidunt, odio purus blandit ipsum, vel scelerisque metus leo eget massa. Aliquam erat volutpat. In ultrices mi nec erat. Nulla facilisi. Vivamus a tellus ut risus accumsan accumsan. Donec sed sapien quis arcu auctor tincidunt. Curabitur in est eget diam posuere varius. Fusce mollis auctor nulla. Donec ac augue at massa interdum porta. Mauris eu ipsum. Curabitur ut orci vel purus mollis tempus. In at velit in erat laoreet ultricies. Integer libero.</p>
    
    <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor. Fusce pulvinar lacus ac dui. Praesent ullamcorper, turpis ut tempus tincidunt, odio purus blandit ipsum, vel scelerisque metus leo eget massa. Aliquam erat volutpat. In ultrices mi nec erat. Nulla facilisi. Vivamus a tellus ut risus accumsan accumsan. Donec sed sapien quis arcu auctor tincidunt. Curabitur in est eget diam posuere varius. Fusce mollis auctor nulla. Donec ac augue at massa interdum porta. Mauris eu ipsum. Curabitur ut orci vel purus mollis tempus. In at velit in erat laoreet ultricies. Integer libero.</p>
    
    <p class="left">This paragraph clears left.</p>
    

    CSS Content

    .left {
        border: 1px solid black;
        clear: left;
    }
    .black {
        float: left;
        margin: 0;
        background-color: black;
        color: #fff;
    }
    .red {
        float: left;
        margin: 0;
        background-color: red;
    }
    p {
        width: 30%;
    }
    

    clear: right

    HTML Content

    <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. Praesent ullamcorper, turpis ut tempus tincidunt, odio purus blandit ipsum, vel scelerisque metus leo eget massa. Aliquam erat volutpat. In ultrices mi nec erat. Nulla facilisi. Vivamus a tellus ut risus accumsan accumsan. Donec sed sapien quis arcu auctor tincidunt. Curabitur in est eget diam posuere varius. Fusce mollis auctor nulla. Donec ac augue at massa interdum porta. Mauris eu ipsum. Curabitur ut orci vel purus mollis tempus. In at velit in erat laoreet ultricies. Integer libero.</p>
    
    <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor. Fusce pulvinar lacus ac dui. Praesent ullamcorper, turpis ut tempus tincidunt, odio purus blandit ipsum, vel scelerisque metus leo eget massa. Aliquam erat volutpat. In ultrices mi nec erat. Nulla facilisi. Vivamus a tellus ut risus accumsan accumsan. Donec sed sapien quis arcu auctor tincidunt. Curabitur in est eget diam posuere varius. Fusce mollis auctor nulla. Donec ac augue at massa interdum porta. Mauris eu ipsum. Curabitur ut orci vel purus mollis tempus. In at velit in erat laoreet ultricies. Integer libero.</p>
    
    <p class="right">This paragraph clears right.</p>
    

    CSS Content

    .right {
        border: 1px solid black;
        clear: right;
    }
    .black {
        float: right;
        margin: 0;
        background-color: black;
        color: #fff;
    }
    .red {
        float: right;
        margin: 0;
        background-color: red;
    }
    p {
        width: 30%;
    }

    clear: both

    HTML Content

    <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. Praesent ullamcorper, turpis ut tempus tincidunt, odio purus blandit ipsum, vel scelerisque metus leo eget massa. Aliquam erat volutpat. In ultrices mi nec erat. Nulla facilisi. Vivamus a tellus ut risus accumsan accumsan. Donec sed sapien quis arcu auctor tincidunt. Curabitur in est eget diam posuere varius. Fusce mollis auctor nulla. Donec ac augue at massa interdum porta. Mauris eu ipsum. Curabitur ut orci vel purus mollis tempus. In at velit in erat laoreet ultricies. Integer libero.</p>
    
    <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor. Fusce pulvinar lacus ac dui. Praesent ullamcorper, turpis ut tempus tincidunt, odio purus blandit ipsum, vel scelerisque metus leo eget massa. Aliquam erat volutpat. In ultrices mi nec erat. Nulla facilisi. Vivamus a tellus ut risus accumsan accumsan. Donec sed sapien quis arcu auctor tincidunt. Curabitur in est eget diam posuere varius. Fusce mollis auctor nulla. Donec ac augue at massa interdum porta. Mauris eu ipsum. Curabitur ut orci vel purus mollis tempus. In at velit in erat laoreet ultricies. Integer libero.</p>
    
    <p class="both">This paragraph clears both.</p>
    

    CSS Content

    .both {
        border: 1px solid black;
        clear: both;
    }
    .black {
        float: left;
        margin: 0;
        background-color: black;
        color: #fff;
    }
    .red {
        float: right;
        margin: 0;
        background-color: red;
    }
    p {
        width: 45%;
    }

    Specifications

    Specification Status Comment
    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 specification

    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
    Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    Basic support 1.0 1.0 (1) 6.0 6.0 1.0

    See also

    Document Tags and Contributors

    Last updated by: ktugangui,