CSS:浮动:左和浮动:右

Question

float:left和float:right在具有position:relative的父级中有什么区别？在我的测试中，这两种方法都会导致一个div浮动在它的父级的左上角，覆盖图像(除非我使用right: 0px手动定位div )。

我可以看到position:absolute的不同之处。float:left需要它来覆盖图像上的div，使用float:right，我可以省略它，仍然可以得到覆盖效果。

有人能告诉我这里发生了什么吗？

我的问题在这个jsFiddle中得到了说明。

HTML：

<div class="parent">
    <div class="tag">Featured</div>
    <img src="http://www.placehold.it/200x200">
</div>

CSS：

.parent {
    position:relative;
    width: 200px;
}
.tag {
    float: right;
    position: absolute;   /* can omit when using float:right */
    /* right: 0px; */     /* uncomment to right-align child */
}

编辑：

我弄错了我关于position:absolute和float的陈述。不知怎么的，我在和jsFiddle玩的时候给人留下了这样的印象，很抱歉搞混了。谢谢你的回答。

Answer 1

不能在设置了float的元素上使用position: absolute;。只需使用left: 0;或right: 0;在具有position: relative;的父级内部对齐它们。

而且，position: relative不会触及您的孩子的浮动行为。正是position: absolute禁用了浮点功能。这就是为什么你的float: right也在左边的顶部。使用position: absolute，您希望显式地说明元素的位置。浮标不适合这个角色，因此不会产生任何效果。

Answer 2

绝对定位使该元素脱离正常流动。因此，当您尝试使用float时，它没有任何效果，因为它不能在您的.container中流到“float”。您告诉它忽略其余的绝对定位元素。使用绝对定位，您必须声明希望它驻留在父级中的位置。所以@Francodi解决方案是正确的。只是进一步解释一下。

Answer 3

浮点数既不影响position:absolute元素，也不影响父子关系。它只涉及生活在同一DOM级别上的元素。float:left将允许元素在左边浮动，而在相反的方向浮动。应用在元素上的clear: both阻止浮动：

http://jsfiddle.net/MUP59/

大多数情况下，你最好使用display:inline-block。