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

Question

我已经阅读了这篇文章，提到了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>

风格：

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

Answer 1

取自W3C CSS 2.1规范http://www.w3.org/TR/CSS2/visuren.html#floats：

  

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

在这种情况下，对您有用的是使用display: inline-block;代替：

li {
    display: inline-block;
    margin: 4px;
    vertical-align: top;
}

<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>

Answer 2

因为数字2有float：left，如果是空格和元素可以浮动在左边，它们会。

您所描述的行为，例如数字1下面的数字4堆叠更适合内联块