Question

float:left的父级中float:right和position:relative之间的区别是什么？在我的测试中，两者都会导致div浮动在其父级的左上角，覆盖图像（除非我使用div手动定位right: 0px）。

我可以看到与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中流动到“浮动”。你告诉它忽略绝对定位的其余元素。通过绝对定位，您必须说明您希望它驻留在父级中的位置。所以@Francodi解决方案是正确的。只是进一步解释。

Answer 3

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

http://jsfiddle.net/MUP59/

Imho你最好在大多数时候使用display:inline-block。

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

3 个答案: