css - 不同高度的浏览器 block float 逻辑

Question

浏览器定位这样的元素的逻辑是什么:

基本上，据我所知，这可以在没有 Bootstrap 的情况下使用一个简单的容器 block 和不同高度的 width: 33.333333% block 重新创建。为什么 d block 没有向左浮动，在 a block 下面？

fiddle :https://jsfiddle.net/8qbuczau/

Answer 1

您可能希望 d block 与 e 和 f block 位于新的一行，但事实并非如此因为第一行有足够的水平和垂直空间，可以让它位于c block 下方。

如果您从 b 元素中删除换行符，那么 d 将被迫到下一行，因为没有更多的垂直空间可以填充。

.row {
  overflow: auto;
}

div
{
  border: 1px dashed maroon;
  box-sizing: border-box;
}
div.col-md-4
{
  margin-bottom: 1em;
  width: 33.333333%;
  float: left;
}

<div class="container">
  <div class="row">
    <div class="col-md-4">a</div>
    <div class="col-md-4">
      b
    </div>
    <div class="col-md-4">c</div>
    <div class="col-md-4">d</div>
    <div class="col-md-4">e</div>
    <div class="col-md-4">f</div>
  </div>
</div>

如果您向 b 元素添加更多换行符，您将看到 e 和 f 也具有相同的行为。

Per the w3 spec :

If the float reference is not a line box, the element generates a box that is floated to the block-start and line-start outer edges of the float reference.

还有:

If the float reference is not a line box, the element generates a box that is floated to the block-end and line-start outer edges of the float reference.

对于 float ，如果有足够的空间，它们自然会尝试逐行移动到其 containing 元素的开头或结尾。阻止这种情况发生的是，通常没有足够的空间让他们坐在上一行的末尾，所以他们将自己重新定位在下一行的开头