当左右浮动时，哪个DIV会先定位？

Question

在HTML中，第一个出现的<div>是否很重要？若重要，为什么呢？

.float-left{float:left;}
.float-right{float:right;}

<div>
  <div class="float-left">Left</div>
  <div class="float-right">Right</div>
</div>

<div>
  <div class="float-right">Right</div>
  <div class="float-left">Left</div>
</div>

- user1032531

---

你的意思是指定位于哪里？在DOM中还是在显示时？ - Derek Story

@dwreck08 HTML是如何编写的。编辑。我猜这与DOM相同。 - user1032531

Answer 1

简单来说，浮动元素的表现如下_{^{(详见精确规则)}}：

• 浮动元素尽可能地被放置在最高处（但不超过源文档中先前生成的带有内容的行框）。
• 左浮动元素尽可能地向左侧放置，而不与文档顺序中先前的浮动元素重叠。
• 右浮动元素尽可能地向右侧放置，而不与文档顺序中先前的浮动元素重叠。

因此，如果您有一个左浮动元素和一个右浮动元素，并且两者都适合同一行，则文档顺序无关紧要。

否则，文档顺序中先出现的浮动元素将会显示得更高。

div {
  margin: 30px 0;
  border: 1px solid;
  overflow: hidden;
  counter-reset: float;
}
.wide { width: 75%; }
.left{ float: left; background: #ff0; }
.right{ float: right; background: #0ff; }
span:before { content: counter(float) ". ";  counter-increment: float; }

<div><span class="left">Left</span><span class="right">Right</span></div>
<div><span class="right">Right</span><span class="left">Left</span></div>
<div><span class="left wide">Left</span><span class="right wide">Right</span></div>
<div><span class="right wide">Right</span><span class="left wide">Left</span></div>

- Oriol

---

我记得很久以前读到过 right div 应该首先定位，但我不记得为什么或者这个建议是否正确。 - user1032531

@user1032531 或许是因为如果你想把一个右浮动元素放在非浮动块的右侧，那么浮动元素必须在该块之前而不是之后。 - Oriol

我认为那就是情况。为什么一定要那样呢？谢谢。 - user1032531

因为如果浮动元素可以定位到与之前的非浮动元素一样高的位置，那么你如何确定上限呢？ - Oriol

Answer 2

渲染器按顺序向下处理页面，并将样式应用于页面。

这意味着第一个 div 首先应用样式，第二个紧随其后，以此类推：

{{链接1:JSFiddle}}

MDN浮点数页面包含更详细的信息。

另一个值得注意的有趣事情是如何影响堆叠顺序。

- Alvin Pascoe

---

如果第一个 div 先应用样式，这会有什么影响吗？我之前读过一些关于右侧的 div 应该先放置的文章，但我不记得为什么或者这个建议是否正确。 - user1032531

它确实有影响，特别是如果您使用绝对定位（这可能会影响堆叠顺序）。一般来说，没有固定的规则将规则应用于右侧的 div，这完全取决于设计。 - Alvin Pascoe