css - 有趣的 CSS float

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 会 float 到#wrapper div 的最右上角，但是，它停留在#maintitle DIV 下方。

#maintitle DIV 向左浮动，那么它是否允许#rightsidebar div float 到最右上角？

这是在行动，http://jsfiddle.net/BdpU7/ .

Answer 1

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

#rightSidebar 需要放在 HTML 中的 #sidebar 之前，然后 #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>