CSS clearfix

CSS clear float or clearfix is a way for an element to fix/clear the child elements so that we do not require to add extra markup.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
div {
 border: 3px solid red;
 padding: 5px;
 background-color:pink;
 font-size:20px;
}

img{
 float: right;
 border: 3px solid blue;

}
p{
font-size:20px;
clear:right;
}
.jtp{
  overflow: auto;
}
</style>
</head>
<body>

<h1>With Clearfix</h1>
<div class="jtp">
 <img class="img2" src="good-morning.jpg">
 Enter content here......................,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
</div>

</body>
</html>

OUTPUT:

CSS clearfix