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

问题描述

在此布局中，我将 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>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）