CSS | clear Property
The clear property is used to specify 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|inline-start|inline-end|initial;
Property values:
- none: It has a default value. It allows element are float on both the sides.
Syntax:
clear:none;
Example:
html
<!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:
html
<!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:
html
<!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:
html
<!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:
html
<!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
- Edge 12.0
- Internet Explorer 4.0
- Firefox 1.0
- Opera 3.5
- Safari 1.0
Please Login to comment...