css - 有趣的 CSS 浮动

Question

对于某些 DIV，我有以下 CSS，

#wrapper {
  width:960px; 
  border:1px solid red;
  overflow:hidden;
}

#maintitle {
  width:600px;
  height:50px;
  float:left;
  border:1px solid #333;
}

#sidebar {
  clear:both;
  float:left;
  width:100px;
  height:200px;
  border:1px solid #ccc;
}

#rightSidebar {
  width:100px;
  height:200px;
  float:right;
  border:1px solid #CCC;
}

我认为#rightSidebar div 会浮动到#wrapper div 的右上角，但是，它停留在#maintitle DIV 下方。

#maintitle DIV 浮动到左侧，然后它会允许#rightsidebar div 浮动到右上角吗？

它在行动中，http://jsfiddle.net/BdpU7/。

Answer 1

这是你的想法吗？http://jsfiddle.net/BdpU7/1/

#rightSidebar需要#sidebar在 HTML 之前，然后必须#sidebar有clear：

#wrapper {
    width:960px; 
    border:1px solid red;
    overflow:hidden;
}

#maintitle {
    width:600px;
    height:50px;
    float:left;
    border:1px solid #333;
}

#sidebar {
    clear:left;
    float:left;
    width:100px;
    height:200px;
    border:1px solid #ccc;
}

#rightSidebar {
    width:100px;
    height:200px;
    float:right;
    border:1px solid green;
}

<div id="wrapper">
    <div id="maintitle"></div>
    <div id="rightSidebar"></div>
    <div id="sidebar"></div>
</div>