左右浮动时，哪个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>

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> 

Answer 2

渲染器沿着页面向下工作，按顺序将样式应用于页面。

这意味着第一个div首先获取应用于它的样式，第二个div将其样式应用于第二个，依此类推：

的jsfiddle

MDN Float页面包含更多详细信息。

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