为什么在html格式的div中的文本不能环绕我的图片？

<div style="width: 400px;">
  <img src="your_image.jpg" alt="Your Image" style="float: left; margin-right: 10px;">
  <p>这是一段文本，将会环绕在图片周围。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis nisi vestibulum, cursus urna non, viverra velit.</p>
</div>

<div style="width: 400px;" class="clearfix">
  <!-- 图片和文本内容 -->
</div>

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}