当使用左/右浮动时，如何计算位置

Question

在下面的bootstrap网格示例中，它使用col-sm和col-sm-push / pull。 col-sm-push指定了左/右值（偏移量）。

我不太清楚它是如何运作的。

第二个浮动元素位于第一个浮动元素的左侧。

当左/右涉及浮动时，浏览器如何确定其位置？它的参考点是什么？

Here is the example link

<div class="row">
  <div class="col-sm-4 col-sm-push-8">.col-sm-4 .col-sm-push-8</div>
  <div class="col-sm-8 col-sm-pull-4">.col-sm-8 .col-sm-pull-4</div>

@media (min-width: 768px) .col-sm-pull-4 {
    right: 33.33333333%;
}
@media (min-width: 768px) .col-sm-8 {
    width: 66.66666667%;
}

Answer 1

首先：W3schools是一个非常糟糕的文档参考，尝试MDN（Mozilla开发者网络）或官方W3C网站（w3.org）的文档。

W3说以下关于浮动（右）：

  

与'left'相似，除了盒子向右浮动，内容从盒子的左侧开始流动，从顶部开始。

所以这意味着如果你将第一个元素向右浮动，第二个元素在左侧有空间，并尝试在那里定位。