<div id="container" class="clearfix-type-one">
  <img class="floaty-left" src="https://placekitten.com/100/200">
  <img class="floaty-left" src="https://placekitten.com/100/100">
  <img class="floaty-left" src="https://placekitten.com/160/200">
  <img class="floaty-left" src="https://placekitten.com/100/120">
</div>
#container {
  max-width: 600px;
  margin: 0 auto;
  background-color: #eee;
  padding: 20px;
  background-color: #444;
  
  // the "basic" clearfix with after
  &.clearfix-type-one {
    background-color: #644;
    &::after {
      content: " ";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
    }
  }
  
  &.clearfix-type-two {
    overflow: hidden;
    background-color: #464;
  }
  
  &.clearfix-type-three {
    display: flow-root;
    background-color: #446;
  }
}

.floaty-left {
  float: left;
  margin-right: 8px;
}
.floaty-right {
  float: right;
  margin-left: 8px;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.