负利润率突破浮动

Question

当我在做某事时,我注意到一种我无法解释的非常奇怪的行为.两种情况之间的唯一区别是<i>第二个示例中的s已margin-top设置为-10px而不是-9px.我使用负边距将所有盒子顶部移动到相同的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的浏览器确认了这种行为.

Answer 1

我会为异常情况尝试解释(或更好地称为解释).我不能确定我解释的是正确的,因为规范有很多规则,浏览器的实现也可能不完全符合规范.

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

另请参阅边距部分的免责声明:

允许使用保证金属性的负值,但可能存在特定于实现的限制.

您应该从中了解负利润应该由您自己承担风险.

我的建议是放弃负的上边距,因为它可以说是有问题的,而是使用一些转移position: relative(或根本不转移).

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