CSS:float:left 和 float:right 之间的区别

Question

position:relative父级中的float:left和float:right有什么区别？在我的测试中，两者都会导致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

不能对已设置position: absolute;的元素使用 float。只需使用left: 0;或right: 0;将它们对齐到具有position: relative;的父项中即可。

此外，position: relative不会触及您孩子的漂浮行为。它只是禁用浮点功能的position: absolute。这就是您的float: right也在左上方的原因。使用position: absolute，您希望明确说明元素的位置。浮点数不适合此角色，因此不会产生任何影响。

Answer 2

绝对定位使该元素脱离正常流程。 因此，当您尝试使用 float 时，它没有任何效果，因为它无法在您的 .container 内流动以"浮动"。 你告诉它忽略其余元素以进行绝对定位。 使用绝对定位，您必须说明您希望它位于父级中的位置。 所以@Francodi解决方案是正确的。 只是进一步的解释。

Answer 3

浮点型既不影响position:absolute的元素，也不会影响父子关系。它只涉及生活在同一个 DOM 级别的元素。 float:left 将让元素在左侧浮动，反之亦然。 应用于元素clear: both会停止在那里浮动：

http://jsfiddle.net/MUP59/

恕我直言，大多数时候你最好使用display:inline-block。