负余额浮动 [英] Negative margin breaks float

问题描述

当我在做某事时，我注意到一个非常奇怪的行为，我无法解释。两种情况之间的唯一区别是第二个示例中的< i> s具有 margin-top 到 -10px 而不是 -9px 。

While I was working on something, I noticed a very strange behaviour which I couldn't explain. The only difference between the two scenarios is that the <i>s in the second example have margin-top set to -10px instead of -9px. I use the negative margin to shift all of the boxes top with the same ammount.

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的浏览器确认了这个行为。

With only that tiny little change of the top margin they stack on top of each other instead of next to each other. I can't understand what is causing it. I confirmed this behaviour with Gecko and WebKit based browsers.

推荐答案

我会尝试一个解释为异常情况。我不能确定我解释是正确的，因为规范有很多规则，而且浏览器实现可能不完全根据规范。

I'll try an explanation (or better called, an interpretation) for the abnormal scenario. I can't be sure that what I interpret is correct because the specs have a lot of rules and also the browser implementation may not be completely according to the specs.

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

The first float box is positioned left most in the parent and shifted 10px upwards (because of the -10px margin). When the rendering searches for a position for the second box, it starts looking at height 0 of the parent and goes from right to left until it encounters another float, but it doesn't because the first float was shifted completely out of the parent, so it goes all the way to the left. If it happens like this, the 9 float positioning rules are still respected (more or less, again it depends on how the developers interpreted some things).

也考虑这个免责声明从边距部分：

Also consider this disclaimer from the margins section:

允许使用负边缘属性的负值，但可能有
实现特定的限制。 p>

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

您应该明白，应该以自己的风险使用负边距。

You should understand from it that negative margins should be used at your own risk.

我的建议是放弃负顶部保证金，因为它是，有问题，而改用一些移动 position：relative

My recommendation is to give up on the negative top margin because it's, let's say, problematic, and use instead some shifting with position: relative (or don't shift at all).

参考：

https://www.w3.org/TR/CSS2/visuren.html#float-position
< a href =https://www.w3.org/TR/CSS2/box.html#margin-properties> https://www.w3.org/TR/CSS2/box.html#margin-properties a>

这篇关于负余额浮动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！