我有一个向左浮动的div。在div中，我有一个图像。diff后面是一段。
我希望这个段落能围绕图像展开，但我看到了大量的空白。
.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>这是上面的输出
输出
如果我将float属性设置为img，那么它可以按预期工作。
正确输出
我不明白为什么。有人能帮帮我吗？
PS:JSFiddle链接如果有人想玩：
https://jsfiddle.net/chid1989/say7pzqe/#&togetherjs=z8iIlaQmNz
编辑
我试着通过铬来检查元素。显然，div占用了额外的空间。但我不知道为什么。
检查
您的图像宽度(由其类别.class-0-569引起(为33%。但这是它的容器/父元素，即浮动的.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>注释后添加：实际上更简单的替代方法是浮动图像本身，而不使用包装器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>和<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