Example of using overflow: auto to clear floats|CSS Snippet|W3Docs

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        border: 2px solid #1c87c9;
        padding: 8px;
      }
      .noclearfix {
        float: right;
      }
      .clearfix {
        overflow: auto;
      }
      p {
        clear: right;
      }
      .img {
        float: right;
      }
    </style>
  </head>
  <body>
    <div>
      <img class="noclearfix" src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s...
    </div>
    <p>Add overflow: auto;</p>
    <div class="clearfix">
      <img class="img" src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s...
    </div>
  </body>
</html>