Tutorialspoint.dev

CSS | clear Property

This property is used to specify that which side of a 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:



  • 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:



This article is attributed to GeeksforGeeks.org

leave a comment

code

0 Comments

load comments

Subscribe to Our Newsletter