Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

CSS | clear Property

  • Difficulty Level : Easy
  • Last Updated : 08 Aug, 2019

The clear property is used to specify that which side of floating elements are not allowed to float. It sets or returns the position of the element in relation to floating objects. If the element can fit horizontally in the space next to another element which is floated, it will.

Syntax:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

clear: none|left|right|both|initial;

Property values:

  • none: It has a default value. It allows element are float on both the sides.

    Syntax:



    clear:none;

    Example:




    <!DOCTYPE html>
    <html>
        <head>
            <style>
                div {
                    width:100px;
                    height:100px;
                    background-color:green;
                    color:white;
                    font-weight:bold;
                    font-style;itallic;
                    font-size:25px;
                    text-align:center;
                    float: left;
                    padding:15px;
                }
                p.GFG {
                    clear: none;
                }
                h1, h2 {
                    color:green;
                    text-align:center;
                }
            </style>
        </head>
        <body>
            <h1>GeeksForGeeks</h1>
            <h1>clear:none;</h1>
            <div><pre>GFG</pre></div>
            <p>
              GeeksforGeeks:
              A computer science portal for geeks
            </p>
            <p class="GFG">GeeksforGeeks</P>
        </body>
    </html>                                        

    Output:

  • left: This property specifies that elements are not allowed to Float on the left side in relation to other element.

    Syntax:

    clear:left;

    Example:




    <!DOCTYPE html>
    <html>
        <head>
            <style>
                div {
                    width:100px;
                    height:100px;
                    background-color:green;
                    color:white;
                    font-weight:bold;
                    font-style;itallic;
                    font-size:25px;
                    text-align:center;
                    float: left;
                    padding:15px;
                }
                p.GFG {
                    clear: left;
                }
                h1, h2 {
                    color:green;
                    text-align:center;
                }
            </style>
        </head>
        <body>
            <h1>GeeksForGeeks</h1>
            <h1>clear:left;</h1>
            <div><pre>GFG</pre></div>
            <p>
              GeeksforGeeks:
              A computer science portal for geeks
            </p>        
            <p class="GFG">GeeksforGeeks</P>
        </body>
    </html>                    

    Output:

  • right: It means elements are not allowed to float on the right side.

    Syntax:

    clear:right;

    Example:




    <!DOCTYPE html>
    <html>
        <head>
            <style>
                div {
                    width:100px;
                    height:100px;
                    background-color:green;
                    color:white;
                    font-weight:bold;
                    font-style;itallic;
                    font-size:25px;
                    text-align:center;
                    float: left;
                    padding:15px;
                }
                p.GFG {
                    clear: right;
                }
                h1, h2 {
                    color:green;
                    text-align:center;
                }
            </style>
        </head>
        <body>
            <h1>GeeksForGeeks</h1>
            <h1>clear:right;</h1>
            <div><pre>GFG</pre></div>
            <p>
              GeeksforGeeks:
              A computer science portal for geeks
            </p>
            <p class="GFG">GeeksforGeeks</P>
        </body>
    </html>                    

    Output:

  • both: It means floating elements are not allowed to float on the both sides.

    Syntax:

    clear:both;

    Example:




    <!DOCTYPE html>
    <html>
        <head>
            <style>
                div {
                    width:100px;
                    height:100px;
                    background-color:green;
                    color:white;
                    font-weight:bold;
                    font-style;itallic;
                    font-size:25px;
                    text-align:center;
                    float: left;
                    padding:15px;
                }
                p.GFG {
                    clear: both;
                }
                h1, h2 {
                    color:green;
                    text-align:center;
                }
            </style>
        </head>
        <body>
            <h1>GeeksForGeeks</h1>
            <h1>clear:both;</h1>
            <div><pre>GFG</pre></div>
            <p>
              GeeksforGeeks:
              A computer science portal for geeks
            </p>
            <p class="GFG">GeeksforGeeks</P>
        </body>
    </html>                    

    Output:

  • initial: It sets the property to its default value.
    Syntax:
    clear:initial;

    Example:




    <!DOCTYPE html>
    <html>
        <head>
            <style>
                div {
                    width:100px;
                    height:100px;
                    background-color:green;
                    color:white;
                    font-weight:bold;
                    font-style;itallic;
                    font-size:25px;
                    text-align:center;
                    float: left;
                    padding:15px;
                }
                p.GFG {
                    clear: initial;
                }
                h1, h2 {
                    color:green;
                    text-align:center;
                }
            </style>
        </head>
        <body>
            <h1>GeeksForGeeks</h1>
            <h1>clear:initial;</h1>
            <div><pre>GFG</pre></div>
            <p>
              GeeksforGeeks:
              A computer science portal for geeks
            </p>
            <p class="GFG">GeeksforGeeks</P>
        </body>
    </html>                    

    Output:

    Supported Browsers: The browsers supported by clear property are listed below:

    • Google Chrome 1.0
    • Internet Explorer 5.0
    • Firefox 1.0
    • Opera 6.0
    • Safari 1.0



    My Personal Notes arrow_drop_up

Start Your Coding Journey Now!