<div>
  <article>
    <p>
      <img src="https://assets.codepen.io/77020/small-chicken-nugget.png" alt="chicken nugget">
      No clearfix
    </p>
  </article>
  
  <article>
    <p class="classic-clearfix">
      <img src="https://assets.codepen.io/77020/small-chicken-nugget.png" alt="chicken nugget">
      Classic <code>::after</code> clearfix
    </p>
  </article>

  <article>
    <p class="modern-clearfix">
      <img src="https://assets.codepen.io/77020/small-chicken-nugget.png" alt="chicken nugget">
      Modern <code>flow-root</code> clearfix
    </p>
  </article>
</div>

img {
  float: right;
}

.classic-clearfix::after {
  content: '';
  display: block;
  clear: both;
}

.modern-clearfix {
  display: flow-root;
}

/* everything below is for demo appearances and not important to the concept */

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  margin: 0;
  color: #000;
  background-color: #b9d7d9;
  font: 500 1.25rem/1.5 'Roboto Mono', monospace;
}

article {
  /* using a second (modern) clearfix around each example to reset them */
  display: flow-root;
  margin: 40px;
}

p {
  margin: 0;
  padding: 10px;
  border: 2px dashed #0004;
  border-radius: 5px;
  background-color: #fffa;
  box-shadow: 0 0 0 5px #fff;
}

code {
  padding: 1px 4px;
  border-radius: 4px;
  background-color: #0001;
  font-family: inherit;
  white-space: nowrap;
}

@media (max-width: 400px) {
  img { width: 100px; }
  body { font-size: 1rem; }
}