为什么内联块容器没有'仅包含浮动项时不折叠

Question

在这个布局中，我将把3个框放在一行中，对每个框应用float: left;。盒子在另外两个容器里。通常情况下，这些容器会崩溃，因为当内容仅由浮动项创建时就会发生这种情况。不过，将两个容器的display属性更改为inline-block可以避免崩溃。

为什么？

此外：我很清楚我们不应该使用float来将元素排成一行，现代正确的方法是使用flexbox或grid，但我偶然发现了这一点，很想理解为什么

.container {
background: tomato;
display: inline-block;
text-align: center;
width: 100%;
}
ul {
background: yellow;
display: inline-block;
list-style-type: none;
padding: 1.5rem;
}
.box {
border: 3px solid black;
float: left;
height: 100px;
width: 100px;
}
.box-1 {
background: aquamarine; 
}
.box-2 {
background: yellowgreen; 
}
.box-3 {
background: pink; 
}

<div class="container">
<ul>
<li class="box box-1"></li> 
<li class="box box-2"></li> 
<li class="box box-3"></li> 
</ul>
</div>

Answer 1

因为inline-block生成块格式化上下文

浮动、绝对定位的元素、不是块框的块容器(如内联块、表单元格和表标题(以及具有"可见"以外的"溢出"的块框(除非该值已传播到视口(为其内容建立新的块格式上下文^ref

并且您可以在MDN:中读取

格式化上下文会影响布局，但通常情况下，我们会为定位和清除浮动创建一个新的块格式化上下文，而不是更改布局，因为建立新块格式化上下文的元素将：

• 包含内部浮动
• 排除外部浮动
• 抑制边际崩溃