JSFiddle - React, Tailwind, and code Playground

by Alex Baumgertner

HTML

<p>С clearfix</p>
<div style="background: #ada;">
    top
</div>
<div class="clearfix" style="background: #eda;">
    <div style="float: left; height: 100px;">item1</div>
    <div style="float: left; height: 100px;">item2</div>
    <div style="float: left; height: 100px;">item3</div>
</div>
<div style="background: #ada;">
    bottom
</div>

<div style="background: #ada;">
    top
</div>

<p>Без clearfix</p>

<div style="background: #eda;">
    <div style="float: left; height: 100px;">item1</div>
    <div style="float: left; height: 100px;">item2</div>
    <div style="float: left; height: 100px;">item3</div>
</div>
<div style="background: #ada;">
    bottom
</div>

CSS

.clearfix:after
{
    display: block;
    clear: both;
    height: 0;
    content: '';
}