浮动带有图像的 div 会产生额外的 space

Question

我有一个 div 向左浮动。在 div 里面，我有一张图片。 diff 之后是一个段落。

我希望段落环绕图像，但我看到很多白色 space。

.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

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

Correct Output

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

PS: JSFiddle link 如果有人想玩:

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

编辑

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

Inspection

Answer 1

<div> 和 <p> 都是块级元素。在文本中浮动图像的正确方法是将 <img> 直接放在 <p>:

中

<html>
<head>
<style>
.class-0-569 {
  padding-right: 2%;
  width: 33%;
  float: left;
}

.class-0-570 {
  line-height: 1.2em;
  margin-top: 0.2816004em;
}
</style>
</head>
<body>
  <p class="class-0-570" id="id-0-555">
    <img alt="" class="class-0-569" id="id-0-554" src="https://i.postimg.cc/BZYZRfKP/image-0-4.jpg">These offer a description of who you are
  </p>
</body>
</html>

Fiddle

Answer 2

您的图像宽度（由其 class .class-0-569 引起）为 33%。但那是它的 container / 父元素，即浮动的 .class-0-568 元素。

将 33% 的宽度应用到图像的 parent (.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>

评论后的补充：实际上更简单的替代方法是在不使用包装器的情况下浮动图像本身 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>

浮动带有图像的 div 会产生额外的 space

Floating a div with image results in extra space

html

css

image

css-float