Html 负保证金浮动

当我在做某事时，我注意到一种我无法解释的非常奇怪的行为。这两种情况之间的唯一区别是，第二个示例中的

将

边距顶部设置为
-10px
，而不是
-9px
。我使用负边距移动所有具有相同数量的方框顶部


main，在一旁{
宽度：100%；
填充：20px 0 10px；
边缘底部：10px；
溢出：隐藏；
背景：浅蓝色；
}
主一，旁白一{
浮动：左；
显示：块；
宽度：10px；
高度：10px；
利润率：-9px 0 5px；
背景：橙色；
}
撇开我{
利润上限：-10px；
}

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

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

也从页边部分考虑这个免责声明：
允许边距属性为负值，但可能存在
具体实施限制

您应该从中了解到，负利润应在您自己的风险下使用

我的建议是放弃负上边距，因为它有问题，可以用一些移位来代替
position:relative
（或者根本不移位）

参考文献：

明确指出“外部高度为零或外部高度为负的浮动不会缩短行框”。有点类似于多个浮点数的情况。谢谢，这很有意义。我将细化问题标题和正文，明确说明
负边距
，以供将来参考。