<div class ="float-container">
  <div class="float">Floated Object</div>
  <p>Sequi soluta optio distinctio doloremque voluptate non fuga consequatur. Iure voluptatibus voluptate eos saepe eos id quia. Expedita quae vel sunt natus minus asperiores error ipsa. Aspernatur repudiandae dolorem molestiae modi. Eaque reprehenderit voluptatem eos est </p>  
</div>
<p>Sequi soluta optio distinctio doloremque voluptate non fuga consequatur. Iure voluptatibus voluptate eos saepe eos id quia. Expedita quae vel sunt natus minus asperiores error ipsa. Aspernatur repudiandae dolorem molestiae modi. Eaque reprehenderit voluptatem eos est. Sit consequatur voluptates consequuntur in ut.

Esse molestiae voluptas blanditiis aut repellendus eveniet veritatis. Sunt aperiam cupiditate et provident quis. Sequi ducimus fugit commodi. Sequi eos impedit in eum vel laudantium. Dicta blanditiis fugiat molestias.
Doloremque atque repellat voluptatem consequatur. Consequatur ratione consequatur natus officia vitae hic. Quis voluptates rerum aliquam quisquam. Deleniti quaerat aut asperiores aliquid porro est nisi. Incidunt eos quos quis et sunt consequatur officiis. Ut cupiditate unde facere exercitationem inventore</p>

<h4>The 'div' element (blue border) isn't affected  by the float, only it's content text is.</h4>

body{
  width: 80%;
  margin: 10vh auto;
}
.float{
  float: left;
  width: 100px;
  height:120px;
  background: #FF0072;
  color: white;
  display: grid;
  place-items: center;
  padding: 2%;
  margin: 0 12px 0 0;
}
p{
  border: 2px solid #3D99FD;
}
.float-container p{
  border: 2px solid #03CC70;
}