JSFiddle - React, Tailwind, and code Playground

HTML

<h2>With clearfix hack</h2>
<p>Notice how the pseudo-element affects the orange container as well</p>
<div class="float"></div>
<div class="container clearfix">
  <div class="float"></div>
</div>

<h2>With display: flow-root</h2>
<div class="float"></div>
<div class="container flow-root">
  <div class="float"></div>
</div>

CSS

.container {
  background-color: orange;
  margin-bottom: 10px;
}

.float {
  float: left;
  width: 100px;
  height: 100px;
  background-color: purple;
  margin-right: 10px;
}

.clearfix::after {
  content: "I'm the pseudo-element used to clear both";
  display: block;
  clear: both;
  background-color: green;
  color: white;
}

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