css - 为什么 float 元素在负边距下工作很奇怪？

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值是视口(viewport)的-50%，等于第二个div自己的宽度。所以第二个 div 与第一个 div 放在同一行，但它的 offsetLeft 是负数所以我看不到它。为什么当 float 元素具有负边距时这会如此奇怪？

Answer 1

两个盒子都向右浮动，第二个盒子放在第一个盒子的左边:

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

在框上添加宽度后，第二个框被推到新的一行:

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

在第二个框上添加负左边距 >= 宽度时，第二个框放在第一个框旁边:

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

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