我可以结合位置：relative和float：left？

Question

我可以在一个元素上应用position: relative和float: left吗？像这样：

div {
  float: left;
  position: relative;
  top: 0px;
  left: 0px;
}

Answer 1

是

CSS2.1, 9.4.3：

  

“根据正常流程或浮动布置一个方框后，   它可能相对于这个位置移动。这称为相对定位“

Answer 2

  

我可以在一个元素上应用position relative和float吗？

是。尝试一下。

Answer 3

我想提供一个不同的答案，以防它可以帮助某人。我有两个并排的div，我希望他们占用空间：

<div class="col-md-12">
    <div class="col-md-6">stuff</div>
    <div class="col-md-6">other stuff</div>
</div>

我以前通过在所有浮动版本之后应用<div class="clear"></div>来做到这一点。这曾经有效，因为.clear { clear: both; }可以解决问题。这不再适合我。相反，I followed these instructions并将此类添加到我的容器中：

.noFloat {
    width: 100%;
    overflow: auto; //If you get a scroll bar, try overflow: hidden;
    float: none;
}

所以我最终得到了：

<div class="col-md-12 noFloat">...</div>

以下是bootply.com示例的链接： http://www.bootply.com/EupCHRhV4s

Answer 4

声称可以组合浮动和位置的答案实际上是不正确的。是的，浮动div的位置确实会移动，但周围的文本不会像你期望的那样流动。问题是位置属性实际上留下了一个白色框，其中你曾经漂浮过的div，然后将div移动到其他地方，留下了框。换句话说，你将你的div放在文本的顶部，当你可能想要的是文本在div的新位置流动时。

这是一个具有简单浮动的d​​iv的示例：右

这是同一个div的一个例子，但是位置：相对;和顶部：.75in;加入：

请注意该框现在位于文本顶部。这可能不是你想要的！

Answer 5

是的，使用 shape-outside + 高度 100% + 伪元素

/* container */
.two-box { display: flex; }
.two-box > div { border: solid 1px blue; }

/* border */
.two-box > div > .label::before {
 content: "";
 position: absolute;
 width: 3em;
 height: 3em;
 border: solid 1px red;
}

/* float shape + text */
.two-box > div > .label {
 position: relative;
 height: 100%;
 width: 3em;
 shape-outside:
  polygon(
    0 33%,
    100% 33%,
    100% 66%,
    0 66%
  )
 ;
 border: dotted 1px yellow;
 color: red;
 text-align: center;
 /* vertical center text */
 display: flex;
 justify-content: center;
 flex-direction: column;
}

.two-box > .left > .label { float: right; }

.two-box > .right > .label { float: left; }

<div class="two-box">
 <div class="left">
  <div class="label">L</div>
  L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L L
 </div>
 <div class="right">
  <div class="label">R</div>
  R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R R
 </div>
</div>

Answer 6

是的，您可以同时使用两者。

您将使用float:left将元素定位到左侧，并允许下一个元素位于此右侧。

position:relative会影响自己，也会影响自己的孩子。当你使用left:npx;top:npx时，它会将这个元素向左，向右，向上和向下移动。

您可以查看此演示：jsfiddle link