Javascript 浮动元素如何占据垂直空间

我读过这篇提到CSS使用的文章，但我仍然不明白为什么第四张图片不在第一张图片下面，而是在第三张图片下面。请帮帮我。 Html代码：

<ul>
  <li><img src="http://placehold.it/100x100&text=1"></li>
  <li><img src="http://placehold.it/100x150&text=2"></li>
  <li><img src="http://placehold.it/100x100&text=3"></li>
  <li><img src="http://placehold.it/100x100&text=4"></li>
  <li><img src="http://placehold.it/100x100&text=5"></li>
  <li><img src="http://placehold.it/100x150&text=6"></li>
  <li><img src="http://placehold.it/100x100&text=7"></li> </ul>

---

摘自W3C CSS 2.1规范：

浮动框向左或向右移动，直到其外缘接触包含块边缘或另一个浮动框的外缘。如果有行框，则浮动框的外部顶部与当前行框的顶部对齐

在这种情况下，您可以使用display:inline块；相反：

李{ 显示：内联块； 保证金：4倍； 垂直对齐：顶部； }

---

因为数字2有float:left，如果是空间和元素可以在左边浮动，那么它们会

---

您正在描述的行为，例如第4个堆叠在第1个下面更适合内联块

谢谢，但在这种情况下，行框是什么意思？我想描述行框最简单的方法是说它是一行文本。提供了更全面的解释。

li {
 float: left;
 margin: 4px;
}