为什么浮动右div在下一个div中漂浮？

Question

我希望我不是css的初学者，但我不明白为什么会发生以下情况......

您可以看到示例here

我希望在同一“行”上显示2个分隔的div：

• 第一个div必须100％宽度到第二个
• 第一个
的极右边的第二个div

所以，我做了以下

// CSS
.div2 {
    background:#EDEDED;
    float:right;    
}
.div1  {    
    background:#CCC;
}
.div1, .div2 {
    padding:4px;
    margin:4px;
}
.round {
    -webkit-border-radius:8px;
    -moz-border-radius:8px;
    border-radius:8px;
    border:1px solid #000;
}
// HTML
<div class="div2 round">Test 2</div>
<div class="div1 round">Test 1</div>

但是.div2在第一个div里面......

如何显示如下内容？ （就像我认为它应该显示......）

任何帮助表示赞赏...

编辑：解决方案 截至user570783

.div1 {overflow:hidden;}

工作就像一个魅力，但没有真正记录，为什么这有效？

Answer 1

float做了什么。浮动。因为东西可以在它下面。文本将被包装，但边框不会

如果您知道“测试2”的宽度，则可以添加“margin-right：x;”

Answer 2

好的，这里有很多解决方案，包括浮点数，内联块，边距和边框，但都需要知道至少一个元素的大小。

然而！

你可以在这里做一些技巧。如果你将'overflow：hidden'添加到第一个div，它将强制div为'block formatting context'

这将获得您所追求的结果，具有动态大小的右浮动元素。

要在IE5和6中使这个工作，你需要在第一个元素上触发'hasLayout'，所以position：relative;

fiddle