JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block-clearfix">
    <span>Я float!</span>
    <p>У меня клирфикс с display: block;</p>
</div>
<p>И за мной следует блочный элемент с большим margin-ом. Опа! Что это?</p>

<div class="table-clearfix">
    <span>Я float!</span>
    <p>А у меня клирфикс с display: block;</p>
</div>
<p>И за мной тоже следует блочный элемент с большим margin-ом. Но он никогда со мной не схлопнется, потому что через таблицу, даже пустую, margin-ы «насквозь» не схлопываются.</p>

CSS

span {
    width: 70px;
    height: 35px;
    float: left;
    margin: 0 20px 5px 0;
    background: green;
}

div {
    background: #eee;
}

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

p {
    margin: 30px 0;
}

.block-clearfix {
    border: 1px solid red;
}
.table-clearfix {
     border: 1px solid red;
}