JSFiddle - React, Tailwind, and code Playground

by Knuckles

HTML

<div class="main">
  .main with a float content
  <div class="content">
  float content
  </div>
</div>

<br>
<hr>

<div class="main">
  .main add a clear:both div
  <div class="content">
  float content
  </div>
  <div class="clear"></div>
</div>

<hr>

<div class="main clearfix">
  .main add a clearfix class
  <div class="content">
  float content
  </div>
</div>

CSS

.main{
   background-color: blue;
   padding: 5px;
}
.content{
  width: 50px;
  height: 50px;
  background-color: red;
  float: left;
}
.clear{
  clear: both;
}

.clearfix:after{
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}