为什么父容器中的float会改变img的大小？

Question

我有一个容器和一个图像。当父母被给予float时，孩子的身高不匹配。当两者都给出float时，它匹配。为什么呢？

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

不匹配时：

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

完美时间：

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

Answer 1

基本上，使用float指定元素in most cases会使其成为block元素。

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

来自MDN：

  

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

float和display: block之间的比较（实质上，结果是相同的）：

.parent {
  float: left;
  border: 2px solid red;
}
.image {
  border: 2px solid blue;
}
.image2 {
  border: 2px solid blue;
  display: block;
}
.image3 {
  border: 2px solid blue;
  float: left;
}

<div class="parent"><img src="https://placehold.it/100x100" class="image"/></div>
<div class="parent"><img src="https://placehold.it/100x100" class="image2"/></div>
<div class="parent"><img src="https://placehold.it/100x100" class="image3"/></div>

Answer 2

andyb 在对该问题的评论中说：

  

这是因为＆lt; img＆gt;是一个替换元素，它具有默认的vertical-align：baseline和基线对齐元素为文本下延器保留空间 - 请参阅stackoverflow.com/questions/5804256/… - andyb

正因为如此，解决此问题的另一种方法是将vertical-align属性设置为 bottom 而不是 baseline 。

从timolawl's answer开始，如果您将第一张图片的样式调整为：

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

然后它看起来与其他两个相同，分别使用display:block和float来获得所需的布局。