CSS | clear Property - GeeksforGeeks

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:
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:
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:
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:
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:
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.0Internet Explorer 5.0Firefox 1.0Opera 6.0Safari 1.0Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.My Personal Notes
arrow_drop_upSave
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
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS-Properties
Technical Scripter 2018
CSS
HTML
Technical Scripter
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
How to update Node.js and NPM to next version ?
CSS to put icon inside an input element in a form
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to set the default value for an HTML <select> element ?
How to update Node.js and NPM to next version ?
How to set input type date in dd-mm-yyyy format using HTML ?