JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block">
    <p><img src="http://placehold.it/100/100" alt="floating image" /> This floating image is (not) cleared with display:block clearfix</p>
    
</div>
<h2>Next content</h2>

<div class="table">
    <p><img src="http://placehold.it/100/100" alt="floating image" />  This floating image is cleared with display:table clearfix</p>
    
</div>
<h2>More content</h2>

CSS

div { background: #ccc; }

h2 { background: #eee; }

img { float: left; }

p { margin-bottom: 95px; }

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

.table:after {
    content: '';
    clear: both;
    display: table;
}