左右浮动时,哪个DIV位于第一位?

时间:2015-09-11 00:12:28

标签: html css

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>

2 个答案:

答案 0 :(得分:5)

简化,浮点数表现得像这样 (见the precise rules

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

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

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

&#13;
&#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;
&#13;
&#13;

答案 1 :(得分:1)

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

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

JSFiddle

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

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