JSFiddle - React, Tailwind, and code Playground

by Boba Poshtar

HTML

<h2>Невірний варіант:</h2>
<div>
  <p class="left">блок зліва</p>
  <p class="right">блок справа</p>
</div>
<p>Контент після блоків</p>

<br><br><br>

<h2>З явним клірфіксом:</h2>
<div>
  <p class="left">блок зліва</p>
  <p class="right">блок справа</p>
  <div class="clr"></div>
</div>
<p>Контент після блоків</p>

<br><br><br>

<h2>З клірфіксом у псевдоелементі:</h2>
<div class="clearfix">
  <p class="left">блок зліва</p>
  <p class="right">блок справа</p>
</div>
<p>Контент після блоків</p>

CSS

p.left, p.right { padding: 10px 20px; background: yellow; }

.left { float: left; }
.right { float: right; }

.clr { clear: both; }

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}