如何在容器div中订购div元素？

Question

为什么它们会根据标记的顺序进行不同的渲染？ 当我把“thirdDiv”放在第一位时，看起来我想要它。

我的HTML看起来像这样：

<div id="container">
   <div id="firstDiv">1st</div>
   <div id="secondDiv">2nd</div>
   <div id="thirdDiv">3rd</div>
</div>

我的CSS看起来像这样：

body{ width: 100px; margin: 0px auto; color: white; }
#container{ width: 100px; height:60px; }
#firstDiv{ position: relative; width:60px; height: 40px; background: blue; }
#secondDiv{ position: relative; width: 60px; height:20px; background-color:red; }
#thirdDiv{ float:right; width:40px; height:60px; background-color: yellowgreen; }

（不正确的） http://jsfiddle.net/3B7xQ/

VS

（正确的） http://jsfiddle.net/EQSa5/

Answer 1

这只是因为你有一个浮动元素作为绿色div的CSS的一部分。 “float-right”使div移动到页面的右侧，具体取决于它在该页面中的垂直位置。

Answer 2

基本上发生这种情况的原因是因为当一个元素浮动时，它将自己移出文档流（从它的当前位置移动而不是移动指定的方向），允许其他元素向上移动到浮动周围的空间元件。在你的情况下，第三个元素从它的当前位置移动到右边，但是它下面没有任何东西可以在它周围移动。

这是一个示例，显示浮动之前和浮动之后元素的外观。

首先使用#thirdDiv元素。

这是#thirdDiv float: none http://jsfiddle.net/EQSa5/2/

这是#thirdDiv float: right http://jsfiddle.net/EQSa5

注意它从当前位置向右移动并让它下面的东西落实到位。

现在#thirdDiv元素排在第三位。

这是#thirdDiv float: none http://jsfiddle.net/3B7xQ/1/

这是#thirdDiv float: right http://jsfiddle.net/3B7xQ

与上一次相同，注意它从当前位置向右移动并让它下面的东西落在原位，但在这种情况下，它下面没有任何东西。

为了进一步说明这里的另一个例子，第3个div为第二个

这是#thirdDiv float: none http://jsfiddle.net/qELaZ/1/

这是#thirdDiv float: right http://jsfiddle.net/qELaZ/

希望有所帮助。我还留下了一篇文章，可以帮助你更多地阅读它。 ：）

这篇文章也解释了确切的情况。 （这是一篇关于理解浮点数的好文章，整篇文章值得一读。）http://alistapart.com/article/css-floats-101

具体来说，这篇文章的一部分名为float。 http://alistapart.com/article/css-floats-101#section5