JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <p>正常文字</p>
    <div class="float-1">
        <p>浮动文字</p>
    </div>
    <div class="float-2">
        <p>浮动文字</p>
    </div>
    <div class="float-3">
        <p>浮动文字</p>
    </div>
</div>

CSS

p{
  margin: 0;
}

.container{
  color: #fff;
  padding: 1em;
  background: #3498db;
}
.container:after{
  content: '';
  clear: both;
  display: block;
}

[class*="float"]{
  float: left;
  padding: .5em;
}
.float-1{
  background: #222;
}
.float-2{
  background: #555;
}
.float-3{
  background: #777;
}