浮动元素不会粘在父包装 div 的顶部

Question

我在包装器中有 3 个 div。我希望它们中的 2 个粘在左上角，并且它们需要彼此位于下方。第三个 div 需要粘在右上角，但不粘在顶部。

我尝试这样做但失败了： http://jsfiddle.net/TZ82X/

<div id="wrapper">
  <div id="logo">Logo</div>
  <div id="motto">Motto</div>
  <div id="nav">Navigation</div>
</div>

CSS：

#wrapper {
  background: #CCC;
  width: 500px;
  height: 250px;
  margin: auto;
}
#logo {
  background: tomato;
  width: 300px;
  height: 20px;
  float: left;
}
#motto {
 background: sienna;
  width: 300px;
  height: 20px;
  float: left;
  clear: left;
}
#nav {
  background: seagreen;
  width: 200px;
  height: 40px;
  float: right;
}

这是 .html 中重新排列 div 的第一次修复： http://jsfiddle.net/KJG9q/

<div id="wrapper">
  <div id="nav">Navigation</div>
  <div id="logo">Logo</div>
  <div id="motto">Motto</div>
</div>

这是对另一个容器 div 的第二次修复： http://jsfiddle.net/x98Mf/

<div id="wrapper">
  <div id="logo-motto-container">
    <div id="logo">Logo</div>
    <div id="motto">Motto</div>
  </div>
  <div id="nav">Navigation</div>
</div>

CSS：

#logo-motto-container {
  float: left;

我不想重新排列 .html 中的元素，因为我希望它们为移动设备的样式正确排列，我可以使用另一个包装器 div，但我想知道为什么第一种方法不起作用以及是否有修复它而不弄乱 .html 并保持模板灵活（没有位置：相对）？

Answer 1

我已经修改了你的小提琴，以便给你你想做的事情。

以下链接是您的第一个修复小提琴的修改版本。我刚刚使用了 css 属性，并没有根据需要移动任何 html div。

Fiddle Link

#nav {
    background: seagreen;
    width: 100%x;
    height: 40px;    
}

Answer 2

从#nav 中删除float: right;。

#nav {
    background: seagreen;
    width: 200px;
    height: 40px;
}  

Answer 3

#nav {
    background: seagreen;
    width: 200px;
    height: 40px;
    float: right;
    position: absolute;
}