Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Turning off Float using Clear Property of CSS
We can use CSS clear property to specify the side of the floated element which is to be cleared of flowing content. If you want to control the element next to a floating element, then use the clear property.
Syntax
The following is the syntax of the float property −
clear: value;
The value can be −
none − The element is not set below left or right floated elements. Default.
left − The element is set below left floated elements
right − The element is set below right floated elements
both − The element is set below both left and right floated elements
Example
Let’s see an example of the CSS clear property. To begin with, set the elements to be aligned −
<p class="red">Important Notice</p> <p class="clear red">Important Notice</p> <p class="yellow">Mediocre Notice</p> <p class="green">Ignorable Notice</p>
Float all the <p> elements to the left using the float property −
p {
float: left;
margin: 10px;
padding: 10px;
color:white;
}
The 2nd <p> is set with a clear property −
<p class="clear red">Important Notice</p>
This will clear −
.clear {
clear: left;
}
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<title>CSS Clear</title>
<style>
.clear {
clear: left;
}
.yellow{
background-color: #FF8A00;
}
.red{
background-color: #F44336;
}
.green{
background-color: #4CAF50;
}
p {
float: left;
margin: 10px;
padding: 10px;
color:white;
}
</style>
</head>
<body>
<p class="red">Important Notice</p>
<p class="clear red">Important Notice</p>
<p class="yellow">Mediocre Notice</p>
<p class="green">Ignorable Notice</p>
</body>
</html>
Example
Let’s see another example of the CSS clear property. To begin with, set the <p> elements −
<p>I am okay with shared space</p> <p class="noneFloat">I want a private space</p> <p>I am also okay with shared space</p> <p>Me too</p>
For all the <p> elements, the float property is set with the left value −
p {
float: left;
margin: 10px;
padding: 10px;
color:white;
background-color: #48C9B0;
border: 4px solid #145A32;
}
For the 2nd <p> element, set the clear property to both and float to none: The float: none won’t allow the element to float −
p.noneFloat{
float: none;
clear: both;
color: #34495E;
}
Here is the example −
<!DOCTYPE html>
<html>
<head>
<title>CSS Clear</title>
<style>
p {
float: left;
margin: 10px;
padding: 10px;
color:white;
background-color: #48C9B0;
border: 4px solid #145A32;
}
p.noneFloat{
float: none;
clear: both;
color: #34495E;
}
</style>
</head>
<body>
<p>I am okay with shared space</p>
<p class="noneFloat">I want a private space</p>
<p>I am also okay with shared space</p>
<p>Me too</p>
</body>
</html>
2K+ Views
