浏览器块浮动逻辑的高度不同

时间:2018-04-24 08:55:48

标签: css css-float

用于定位元素的浏览器逻辑是什么:

enter image description here

基本上,正如我所理解的那样,这可以在没有bootstrap的情况下使用简单的容器块和不同高度的width: 33.333333%块重新创建。为什么d块在a块下面没有浮动到左侧?

小提琴:https://jsfiddle.net/8qbuczau/

2 个答案:

答案 0 :(得分:1)

您可能希望d块位于包含ef块的新行,但原因不在于因为有足够的水平< / strong>和第一行的垂直空间,使其位于c块下方。

如果您从b元素中删除换行符,则d将被强制转移到下一行,因为没有更多的垂直空间可供填充。

&#13;
&#13;
.row {
  overflow: auto;
}

div
{
  border: 1px dashed maroon;
  box-sizing: border-box;
}
div.col-md-4
{
  margin-bottom: 1em;
  width: 33.333333%;
  float: left;
}
&#13;
<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>
&#13;
&#13;
&#13;

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

Per the w3 spec

  

如果浮点引用不是行框,则该元素会生成一个框   它浮动到块的开始和行开始的外边缘   浮动参考。

此外:

  

如果浮点引用不是行框,则该元素会生成一个框   它浮动到块的末端和行开始的外边缘   浮动参考。

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

答案 1 :(得分:0)

如果您希望d成为新行,为什么不将它拆分为2个不同的<div class="row">

1行中的总col应该是最大12次。如果你使它变得超过12,不要试试,这可能是因为定位变得混乱。