CSS Float属性疑问：长文本段落为何无法与图片左右浮动？

我正在学习CSS的float属性，遇到一个问题：希望div容器内的图片左浮动、段落右浮动，但设置后长文本段落会显示在图片下方，仅短文本段落能正常右浮动，这让我感到困惑。

使用短文本段落时：

<p>This is simple text</p>

段落能正常显示在容器右侧；但段落内容较多时，就会跑到图片下方。

我的代码 #

CSS 代码

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

div {
  border: 2px solid red;
  overflow: hidden;
}

img {
  float: left;
  border: 2px solid blue;
}

p {
  float: right;
  border: 2px solid cyan;
}

div::after {
  content: "";
  display: block;
  clear: both;
}

HTML 代码

<div>
  <img src="challenges.jpg" width="250" height="250" />
  <p>
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quod nesciunt quis rem autem cupiditate molestias reprehenderit quia iusto, perspiciatis repellendus ipsam esse voluptatum culpa labore omnis inventore voluptates non ducimus.
  </p>
</div>

问题原因 #

这是float属性的核心排版规则导致的：

• 浮动元素的垂直位置由它在文档流中的原始位置决定，float: right的<p>只会在自身所在的垂直区域内尽可能靠右。
• 短文本<p>高度小，它的整体都处于图片顶部的同一水平区域，所以能和图片左右并排。
• 长文本<p>高度超过图片后，<p>的下方部分会因为图片占据了左侧空间，无法在右侧维持布局，只能换行到图片下方——这是float元素的「环绕特性」：文档流中的内容会环绕浮动元素排列，当<p>自身高度足够大，底部区域没有足够右侧空间时，就会填充到图片下方的空白处。
• 另外你没有给<p>设置宽度限制，当<p>的内容宽度加上图片宽度超出容器宽度时，也会触发换行，导致段落跑到图片下方。

内容的提问来源于stack exchange，提问作者Deepak kumar soni