html - float 带有图像的 div 会产生额外的空间

Question

我有一个向左浮动的 div。在 div 内，我有一个图像。差异后面是一个段落。

我希望该段落能够环绕图像，但我看到了很多空白。

.class-0-568 {
  float: left;
}

.class-0-569 {
  padding-right: 2%;
  width: 33%;
}

.class-0-570 {
  line-height: 1.2em;
  margin-top: 0.2816004em;
}

<div class="class-0-568" id="id-0-553">
  <img alt="" class="class-0-569" id="id-0-554" src="https://i.postimg.cc/BZYZRfKP/image-0-4.jpg">
</div>
<p class="class-0-570" id="id-0-555">These offer a description of who you are</p>

这是上面的输出

Output

如果我将 float 属性设置为 img，那么它就会按预期工作。

Correct Output

我不明白为什么。有人可以帮我吗？

PS:如果有人想玩的话，JSFiddle 链接:

https://jsfiddle.net/chid1989/say7pzqe/#&togetherjs=z8iIlaQmNz

编辑

我尝试通过 chrome 检查元素。显然，div 占用了额外的空间。但我不知道为什么。

Inspection

Answer 1

您的图像宽度(由其类 .class-0-569 引起)为 33%。但这是它的容器/父元素，即 float .class-0-568元素。

将 33% 宽度应用于图像的父级 (.class-0-568)，并将 100% 宽度应用于图像本身:

.class-0-568 {
  float: left;
  width: 33%;
}

.class-0-569 {
  padding-right: 2%;
  width: 100%;
  height: auto;
}

.class-0-570 {
  line-height: 1.2em;
  margin-top: 0.2816004em;
}

<div class="class-0-568" id="id-0-553">
  <img alt="" class="class-0-569" id="id-0-554" src="https://i.postimg.cc/BZYZRfKP/image-0-4.jpg">
</div>
<p class="class-0-570" id="id-0-555">These offer a description of who you are</p>

评论后添加:实际上更简单的替代方案是 float 图像本身而不使用包装 div:

#id-0-554 {
  float: left;
  width: 33%;
  margin-right: 2%;
}


.class-0-570 {
  line-height: 1.2em;
  margin-top: 0.2816004em;
}

 <img alt="" class="class-0-569" id="id-0-554" src="https://i.postimg.cc/BZYZRfKP/image-0-4.jpg">
<p class="class-0-570" id="id-0-555">These offer a description of who you are</p>