当我在做某事时,我注意到一种我无法解释的非常奇怪的行为。这两种方案之间的唯一区别是第二个示例中的<i>
将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的浏览器确认了这种行为。
答案 0 :(得分:5)
我会针对异常情况尝试解释(或更好地称为解释)。我不能确定我所解释的是正确的,因为规范有很多规则,浏览器的实现也可能不完全符合规范。
第一个浮动框位于父级最左侧,向上移动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