Question

代码如下：

 * {
     margin:0;
     padding: 0;
    }
.first {
  float: right;
  width: 100%;
  height: 40px;
  background-color: black;
}

.second {
  float: right;
  background-color: red;
  width: 50%;
  height: 40px;
  margin-left: -50%;
}

<div class="first"></div>
<div class="second"></div>

由于第一个div的宽度为100％，因此第一行中没有用于第二个div的空间，我以为第二个div将显示在下一行中，但是第二个div消失了。然后，我发现第二个div的offsetLeft值是视口的-50％，该值等于第二个div自身的宽度。因此，第二个div与第一个div放在同一行，但是其offsetLeft为负，因此我看不到它。当浮动元素的边距为负时，为什么这是如此奇怪？

Answer 1

两个框都向右浮动时，第二个框位于第一个框的左侧：

+------------------------------------------------+
|                                +-----++-------+|
|                                | red || black ||
|                                +-----++-------+|
|                                                |

在框上添加宽度后，将第二个框推到新行：

+------------------------------------------------+
|+----------------------------------------------+|
|| black                                        ||
|+----------------------------------------------+|
|                        +----------------------+|
|                        | red                  ||
|                        +----------------------+|
|                                                |

在第二个框上添加负的左边距> = width时，第二个框位于第一个框的旁边：

                       +------------------------------------------------+
+----------------------++----------------------------------------------+|
| red                  || black                                        ||
+----------------------++----------------------------------------------+|
                       |                                                |
                       |                                                |
                       |                                                |
                       |                                                |

对此行为的粗略解释是，当您添加等于或大于元素宽度的负边距时，其表观宽度变为0，浏览器会将其放在同一行。

Answer 2

第二个div具有margin-left: 50%且宽度为50％，实际上将其放置在屏幕之外。在这种情况下，无需浏览器将其向下移动，它可以根据您的样式将两个div放在同一行。

如果您希望两个div都向右浮动，第二个div应该占据屏幕的50％，则只需移除左边距即可。

* {
     margin:0;
     padding: 0;
    }
.first {
  float: right;
  width: 100%;
  height: 40px;
  background-color: black;
}

.second {
  float: right;
  background-color: red;
  width: 50%;
  height: 40px;
}

<div class="first"></div>
<div class="second"></div>

澄清

为什么第二个div放在外面？ float: right规则使div停留在屏幕的右侧。并结合使用width:50%，最左点将位于屏幕中央。然后，在添加margin-left:50%时，会添加屏幕大小的50％的边距，并且div的最左点将放置在屏幕的右边缘，因此整个div实际上位于屏幕外部

为了使它更加清晰，请看以下示例：

我将第二个div分别设置为width:30%和margin-left:30%，并添加了第三个div，它也以30％的宽度浮动。

现在，浏览器可以将两个div放在同一行中，因为总宽度+边距为90％。

* {
     margin:0;
     padding: 0;
    }
.first {
  float: right;
  width: 100%;
  height: 40px;
  background-color: black;
}

.second {
  float: right;
  background-color: red;
  width: 30%;
  height: 40px;
  margin-left: 30%;
}

.third {
  float: right;
  background-color: #e5e5e5;
  width: 30%;
  height: 40px;
}

<div class="first"></div>
<div class="second"></div>
<div class="third"></div>

如果我们将左边距增加到45％，则总宽度将为105％，这将迫使浏览器将第三个div移至下一行

* {
     margin:0;
     padding: 0;
    }
.first {
  float: right;
  width: 100%;
  height: 40px;
  background-color: black;
}

.second {
  float: right;
  background-color: red;
  width: 30%;
  height: 40px;
  margin-left: 45%;
}

.third {
  float: right;
  background-color: #e5e5e5;
  width: 30%;
  height: 40px;
}

<div class="first"></div>
<div class="second"></div>
<div class="third"></div>

为什么float元素的负边距效果很奇怪？

2 个答案: