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 that 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 elements are float on both sides.
- left: This property specifies that elements are not allowed to Float on the left side in relation to other elements.
- both: It means floating elements are not allowed to float on both sides.
- right: It means elements are not allowed to float on the right side.
- initial: It sets the property to its default value.
Example: In this example, we are using clear: none property.
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:
Example: In this example, we are using clear: left property.
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: 
Example: In this example, we are using clear: right property.
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: 
Example: In this example, we are using clear: both property.
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: 
Example: In this example, we are using clear: initial property.
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
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
04 Aug, 2023
Like Article
Save Article