Html 为什么父容器中的float会改变img'；s码？

我有一个容器和一个图像在里面。当父对象被赋予浮动时，子对象中存在高度不匹配。当两者都给定

float

时，它将匹配。为什么?

 <div class="parent"><img src="images/trest.png" class="image"></img></div>

完美时：

.parent{
float:left;
}
.image{}

.parent{
    float:left;
    }
    .image{
    float:left;
    }

---

基本上，使用

float

指定元素将使其成为

块

元素

默认情况下，图像元素放置在块级容器中时，其下方会出现不需要的空白。解决方案通常是将图像元素的显示设置为

block

发件人：

由于浮动意味着使用块布局，因此在某些情况下，它会修改显示值的计算值：

比较

float

和

display:block

（本质上，结果是相同的）：

.parent{
浮动：左；
边框：2倍纯红；
}
.形象{
边框：2件纯蓝；
}
.image2{
边框：2件纯蓝；
显示：块；
}
.image3{
边框：2件纯蓝；
浮动：左；
}

---

andyb在对这个问题的评论中说：

这是因为被替换的元素具有默认的垂直对齐：基线和基线对齐的元素为文本下行者保留空间-请参见–andyb

因此，解决此问题的另一种方法是将

vertical align

属性设置为bottom，而不是baseline

从中，如果将第一个图像的样式调整为：

.image {
    border: 2px solid blue;
    vertical-align: bottom;    /* added this */
}

---

然后它将看起来与其他两个一样，分别使用

显示：block

和

float

（分别）来获得所需的布局。

对我有用

和结束

之间是否有一个空格“”？另外：

没有结束标记。这不是问题的原因，但

是无效标记<代码>应该是一个自动关闭标记，因为它是一个已替换的元素，具有默认的垂直对齐：基线和基线对齐元素为文本下行者保留空间-请参阅