JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block">
  <span>text</span>
  <div class="float">
    <span>float</span>
  </div>
  <span>text</span>
</div>

<div class="clear"></div>

<div class="block">
  <span>text</span>
  <div class="float clear">
    <span>float+clear</span>
  </div>
  <span>text</span>
</div>

<div class="block">
  <span>text</span>
  <div class="absolute">
    <span>absolute1</span>
  </div>
  <span>text</span>
</div>

CSS

.block{border:1px solid #000;margin:5px}
.float{background:#bbb;}
.float span{float:left;}
.clear:after{content:'';clear:both;display:block;height:0;}
.absolute span{position:absolute;}