clearfixcss.html

<!DOCTYPE html>
<html>
    <head>
        <style>
div{
    border: 3px solid brown;
    padding:5px;
}
.img1{
    float:right;
}
.img2{
    float:right;
}
.clearfix{
    overflow:auto;
}
</style>
</head>
<body>
    <h2>Without clearfix</h2>
    <div>
        <img class="img1" src="example.jpeg" alt="Cat" width="170" height="170">
        The cat (Felis catus) is a domestic species of small carnivorous mammal.[1][2] It is the only domesticated species in the family Felidae and is commonly referred to as the domestic cat or house cat to distinguish it from the wild members of the family.[/div>
      
      <h2 style="clear:right">With Clearfix</h2>
      <p>We can fix this by adding a clearfix class with overflow: auto; to the containing element:</p>
      
      <div class="clearfix">
        <img class="img2" src="example.jpeg" alt="cat" width="170" height="170">
        Cats are commonly kept as house pets but can also be farm cats or feral cats; the feral cat ranges freely and avoids human contact.[5] Domestic cats are valued by humans for companionship and their ability to kill rodents. About 60 cat breeds are recognized by various cat registries.
      
      </div>
      
      </body>
      </html>
      