负保证金打破浮动

Question

当我在做某事时，我注意到一个我无法解释的非常奇怪的行为。这两个场景之间的唯一区别是第二个示例中的 <i> 将 margin-top 设置为 -10px 而不是 -9px。我使用负边距以相同的数量移动所有框的顶部。

main, aside {
  width: 100%;
  padding: 20px 0 10px;
  margin-bottom: 10px;
  overflow: hidden;
  background: lightblue;
}

main i, aside i {
  float: left;
  display: block;
  width: 10px;
  height: 10px;
  margin: -9px 0 0 5px;
  background: orange;
}

aside i {
  margin-top: -10px;
}

<main>
  <i></i>
  <i></i>
  <i></i>
</main>
<aside>
  <i></i>
  <i></i>
  <i></i>
</aside>

只有上边距发生微小的变化，它们才会堆叠在一起，而不是彼此相邻。我不明白是什么原因造成的。我使用基于 Gecko 和 WebKit 的浏览器确认了这种行为。

Answer 1

我会尝试对异常情况进行解释（或者更确切地说，解释）。我不能确定我解释的是正确的，因为规范有很多规则，而且浏览器的实现可能不完全符合规范。

第一个浮动框位于父级的最左侧并向上移动 10px（因为 -10px 边距）。当渲染为第二个框搜索位置时，它开始寻找父级的高度 0 并从右向左移动直到遇到另一个浮动，但它没有因为第一个浮动完全移出父级，所以它一直向左移动。如果发生这种情况，仍然遵守 9 个浮动定位规则（或多或少，这再次取决于开发人员如何解释某些事情）。

另请考虑页边空白部分的免责声明：

Negative values for margin properties are allowed, but there may be implementation-specific limits.

您应该从中了解到，使用负边距应您自担风险。

我的建议是放弃负上边距，因为比方说，有问题，而是使用 position: relative 进行一些移位（或者不使用完全转变）。

参考：
https://www.w3.org/TR/CSS2/visuren.html#float-position https://www.w3.org/TR/CSS2/box.html#margin-properties

负保证金打破浮动

Negative margin breaks float

html

css

margin

css-float