Css 浮动垂直定位

我刚刚开始学习HTMl和CSS。我很难理解浮动是如何工作的。我正在学习的那本书说：

float属性将元素尽可能向左或向右移动，从而允许以下内容环绕它

我在一个段落中有一个图像，我使用float来移动图像，但我不太确定哪些内容包装，以及图像移动到包含元素的顶部/底部有多远

这是在图像后应用了“无后续内容”的不带浮动的段落。图像的底部与文本行的底部对齐：

     <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<img src="icon.jpg" alt="Smiley face" height="42" width="42">
     </p>

知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除了偶尔出于谨慎，还必须为动物的劳动负责

如果我将图像向左浮动，只有最后四个单词似乎环绕着图像。我尝试将图像放在段落中的其他位置，但我无法理解：

a） 图像浮动时向上或向下移动多远？
b） 哪些文本围绕图像（不像书中那样只是以下内容）

我需要为此烦恼吗