Css 为什么浮动右div在下一个div内浮动？

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

你可以看到一个例子

我希望在同一行上显示两个分开的div：

第一个div必须与第二个div保持100%的宽度 第二个div位于第一个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>

---

像符咒一样工作，但没有真正的记录，为什么会这样呢？

float照字面意思做。浮动就像在它下面的东西一样。文本将被包装，但边框不会

---

如果您知道测试2的宽度，您可以在右边添加边距：x

float按所说的做。浮动就像在它下面的东西一样。文本将被包装，但边框不会

---

如果您知道测试2的宽度，您可以在右边添加边距：x

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

然而

你可以在这里玩个把戏。如果在第一个div中添加“overflow:hidden”，则会强制该div

这将得到您想要的结果，使用动态大小的右浮动元素

要在IE5和IE6中实现这一点，您需要在第一个元素上触发“hasLayout”，因此位置：relative

---

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

然而

你可以在这里玩个把戏。如果在第一个div中添加“overflow:hidden”，则会强制该div

这将得到您想要的结果，使用动态大小的右浮动元素

要在IE5和IE6中实现这一点，您需要在第一个元素上触发“hasLayout”，因此位置：relative

---

添加溢出：隐藏；到div1风格@user570783完美答案！谢谢。把它写在一个答案里，然后我就可以接受了。我贴了一个答案，但是因为它太短而变成了评论。无论如何，在回答中包括css标准中记录的这种行为在哪里是有用的。我真的不明白为什么会这样。添加溢出：隐藏；到div1风格@user570783完美答案！谢谢。把它写在一个答案里，然后我就可以接受了。我贴了一个答案，但是因为它太短而变成了评论。无论如何，在回答中包括css标准中记录的这种行为在哪里是有用的。我真的不明白为什么会这样。谢谢你的回答，但我不知道div1或div2的宽度谢谢你的回答，但我不知道div1或div2的宽度在写这篇文章的时候，我没有看到其他人在评论中回答过！gj USER570783无论如何感谢您的回答+1在撰写本文时，我没有看到其他人在评论中回答过！gj USER570783无论如何感谢您的回答+1

.div1 {overflow:hidden;}