JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="floated"></div>
</div>

<hr style="clear: both" />

<div class="container clearfix">
    <div class="floated"></div>
</div>

CSS

.floated {
    float: left;
    background: red;
    width: 100px;
    height: 100px;
}
.container {
    border: 5px solid blue;
}


/* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements.
   j.mp/bestclearfix */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
/* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
.clearfix { zoom: 1; }