为什么内联块容器在仅包含浮动项目时不会折叠？

问题描述

在此布局中，我将 3 个框排成一行，将 float: left; 应用于每个框。 这些盒子在另外 2 个容器内。通常，这些容器会崩溃，因为当内容仅由浮动项目构成时会发生这种情况。 不过，将 2 个容器的 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>

解决方法

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

浮动、绝对定位元素、不是块框的块容器（例如inline-blocks、表格单元格和表格标题），以及带有“溢出”而不是 ' 的块框可见”（除非该值已传播到视口）为其内容建立新的块格式上下文。 ^ref

你可以在the MDN中阅读：

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

• 包含内部浮动。
• 排除外部浮动。
• 抑制边距折叠。