为何默认display:block的div无法容纳浮动图片，改为inline-block即可？

我有一个用background-image:linear-gradient设置背景的div，默认display:block时没法垂直扩展容纳内部图片，图片会溢出div底部边框；把div的display改成inline-block后，它就能垂直扩展完整容纳图片。内部图片设置了float:left，div右侧还有标题和描述文本。我懂block、inline和inline-block的基本区别，但搞不懂为啥改成inline-block就能让div适配图片。div的height和width都是auto，图片有固定宽高，功能已经实现，就想知道背后的原理。

HTML代码 #

<div class="header2">
    <img class="logo2" src="Images/jailhousejournals4.PNG" alt="Journal and Coffee in jail cell"> 
    <h2 style="vertical-align:top;">Correctional Compositions</h2>
    <p>The following entries were composed within Fayette County Detention Center, while serving a three-month sentence. During that time I began to formulate my literary voice, through reflection and contemplation of my life and the world I inhabit. </p>
</div>

CSS代码 #

.header2 {
  background-image: linear-gradient(to bottom, black 82%, blue);
  height: auto;
  width: auto;
  display: inline-block;
  font-family: "Seymour One", sans-serif;
  color: rgb(0, 100, 230);
  text-align: center;
  text-shadow: 2px 2px 0 grey, 2px 2px 6px black;
  font-size: 25px;
  margin-bottom: 5px;
  border: 2px hidden;
  border-radius: 8px;
  box-shadow: 0 3px 5px 4px rgb(100, 50, 150);
}
.logo2 {
    float: left;
    width: 200px;
    height: 180px;
    margin: 10px;
}

核心原因在于块级元素（block）和行内块元素（inline-block）处理浮动元素高度塌陷的机制差异：

• 块级元素的高度计算逻辑：当块级元素设为height:auto时，它的高度只由内部处于正常文档流的元素决定。浮动元素会脱离正常文档流，所以block容器计算高度时会直接忽略浮动图片的存在，只算右侧标题和段落的高度，导致图片溢出容器底部。

• 行内块元素的高度计算逻辑：行内块元素属于行内格式化上下文（IFC），IFC在计算容器高度时，会把内部所有元素——包括浮动元素——的高度都纳入考量，确保容器能完整包裹住所有内容，自然就解决了图片溢出的问题。

说白了就是：block默认不“承认”浮动元素的高度，inline-block默认能“识别”，所以切换后容器就自动适配了图片高度。

内容的提问来源于Stack Exchange，提问作者Isaac Sizemore