Turning off Float using Clear Property of CSS

CSS Web Development Front End Technology

We can use CSS clear property to specify the side of the floated element which is to be cleared of flowing content.

Example

Let’s see an example of CSS clear property −

<!DOCTYPE html>
<html>
<head>
<title>CSS Clear</title>
<style type="text/css">
.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>

Output

This will produce the following output −

Example

Let’s see another example of CSS clear property −

Live Demo

<!DOCTYPE html>
<html>
<head>
<title>CSS Clear</title>
<style type="text/css">
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>