JSFiddle - React, Tailwind, and code Playground

HTML

<html>
  <head>
    <style>
      .clearfix::after {
        display: block;
        content: " ";
        clear: both;
      }
    </style>
  </head>
  <body>
    <!-- it works like you expect -->
    <div class="clearfix">
      <h1>img(float: left) ; (p float: none)</h1>
      <img src="http://via.placeholder.com/640x100" style="float: left"/>
      <p>
        Text1
      </p>
    </div>
    <hr/>
    <!-- it DOES NOT work like you expect -->
    <div class="clearfix">
      <h1>img (float: left) ; p(with width float: none)</h1>
      <img src="http://via.placeholder.com/640x100" style="float: left"/>
      <p style="width: 300px;">
        Text1
      </p>
    </div>
    <hr/>
    <!-- ¿what is the difference between explicit float left in p and does not ? -->
     <div class="clearfix">
      <h1>img (float: left) ; p(with width float: left)</h1>
      <img src="http://via.placeholder.com/640x100" style="float: left"/>
      <p style="width: 300px;float:left">
        Text1
      </p>
    </div>
  </body>
</html>