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

简化，浮点数表现得像这样_{^{（见the precise rules）}}：

浮动放置尽可能高（但不高于源文档中先前生成的内容的行框）。
左浮动放置在尽可能远的左侧，不会按文档顺序重叠先前的浮动。
右侧浮动放置在尽可能远的位置，而不会按文档顺序重叠先前的浮动。

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

否则，按文档顺序首先出现的浮点数将显示得更高。

＆＃13;

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; }

＆＃13;

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

＆＃13;

Answer 2

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

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

JSFiddle

MDN Float page包含更详细的信息。

另一个有趣的事情是stacking order也受到影响。

左右浮动时，哪个DIV位于第一位？

2 个答案: