html - 左右浮动时，哪个DIV先到？

Question

哪个<div>重要吗？位于 HTML 的首位？如果是，为什么？

.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>

Answer 1

简化后， float 的行为如下_{^{(参见the precise rules)}}:

• float 放置得尽可能高(但不要高于源文档中较早生成的内容的线框)。
• Left-floats 放置在尽可能靠左的位置，不与文档顺序中的先前 float 重叠。
• Right-floats 放置在尽可能靠右的位置，不会与文档顺序中的先前 float 重叠。

因此，如果您有一个 left-float 和一个 right-float，并且两者都在同一行，则文档顺序无关紧要。

否则，文档顺序中最先出现的 float 将显示得更高。

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>