Skip to content
Related Articles

Related Articles

CSS | clear Property
  • Difficulty Level : Easy
  • Last Updated : 08 Aug, 2019
GeeksforGeeks - Summer Carnival Banner

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:

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

    full-stack-img

    My Personal Notes arrow_drop_up
Recommended Articles
Page :