负保证金突破浮动

伊泰·格鲁杰夫(Itay Grudev)

当我在做某事时,我注意到一个非常奇怪的行为,无法解释。两种情况之间的唯一区别是<i>第二个示例中的smargin-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的浏览器确认了此行为。

阿林·普卡鲁(Alin Purcaru)

我将尝试对异常情况进行解释(或更好地称为解释)。我不确定我的解释是正确的,因为这些规范有很多规则,而且浏览器的实现可能也不完全符合这些规范。

第一个浮动框位于父级中最左侧,并向上移动10像素(由于-10像素边距)。当渲染搜索第二个框的位置时,它将开始查看父级的高度0,并从右向左移动,直到遇到另一个浮动,但这不是因为第一个浮动已完全移出了父级,所以它一直到左边 如果发生这种情况,仍然会遵循9个float定位规则(或多或少,这又取决于开发人员如何解释某些事情)。

另外,请从边距部分考虑此免责声明:

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

您应该从中了解到,使用负边距需要您自担风险

我的建议是放弃负的上边距,因为这是有问题的,而是使用一些移位position: relative(或根本不移位)。

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章