Turning off Float using Clear Property of CSS

CSSWeb DevelopmentFront 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 −

 Live Demo

<!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>

Output

This will produce the following output −

raja
Published on 08-Jan-2020 10:43:38
Advertisements