JSFiddle - React, Tailwind, and code Playground

HTML

<div class="clearfix1">
    <p>clearfix 1: after method</p>
    <div class="floated">floated left</div>
    <div class="floated">floated left</div>
    <div class="floated">floated left</div>
    <div>uncleared block element</div>
</div>
<div>cleared block element</div>
<p>After method does not work on browsers with no :after and pseudo-content support</p>

<hr />

<div class="clearfix2">
    <p>clearfix 2: overflow method</p>
    <div class="floated">floated left</div>
    <div class="floated">floated left</div>
    <div class="floated">floated left</div>
    <div>uncleared block element</div>
</div>
<div>cleared block element</div>
<p>note the shadow gets clipped at the bottom (and top if shadows are offset to the top). This is a disadvantage of overflow:hidden</p>

<hr />

<p>clearfix 3: clearing element method</p>
<div class="floated">floated left</div>
<div class="floated">floated left</div>
<div class="floated">floated left</div>
<div>uncleared block element</div>
<div class="clearfix3"><div>
<div>cleared block element</div>
<p>Works like :after with pseudo-content, but explicitly uses an element as content.</p>
    
<hr />
    
<p>clearfix 4: clearing the next element itself</p>
<div class="floated">floated left</div>
<div class="floated">floated left</div>
<div class="floated">floated left</div>
<div>uncleared block element</div>
<div class="clearfix4">cleared block element</div>
<p>In this one, we clear the element after. But it's not fixing the float-related content. We are giving a potentially unknown content the burden of clearing itself due to non-clearing content.</p>

CSS

.floated {
    float:left;
    background: red;
    color:white;
    width: 50px;
    height: 50px;
    padding: 10px;
    margin: 20px;
    box-shadow : #333 0 10px 15px 10px;
}

hr{
    clear:both;
    margin: 10px 0;
}

.clearfix1:after {
    content: ".";
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}

.clearfix2{
    overflow:hidden;
}

.clearfix3{
    clear:both;
}

.clearfix4{
    clear:both; /*or left*/
}