html - CSS:float:left 和 float:right 的区别

Question

float:left 和 float:right 在具有 position:relative 的父级中有什么区别？在我的测试中，两者都会导致 div float 在其父级的左上角，覆盖图像(除非我使用 right 手动定位 div : 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

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

此外，position: relative 不会影响您 child 的 float 行为。只是 position: absolute 禁用了 float 功能。这就是您的 float: right 也位于左上角的原因。使用 position: absolute 你想明确说明元素所在的位置。花车不适合这个 Angular 色，因此不会有任何效果。