Html 需要解释为什么将右浮动元素作为div中的第一个元素修复了新行问题

我有一个有几个元素的div，最后一个元素是一个按钮，我希望它距离div的右边缘10像素。div和按钮具有固定的宽度。该按钮具有display:inline，注意浮动元素获得块行为。问题是给按钮一个右浮动总是把按钮放在一个新的行中，即使div中有足够的空间

我找到的一个简单的解决方案是将按钮作为div中的第一个元素。它在IE6、7、8和FF中工作。我想知道这是否是css标准中的预期行为

在CSS书籍中，我没有提到过这个小把戏，或者说它不适合我。如果有人能引用一本书或一个网站来解释这种行为，我将不胜感激

补充： 容器div使用此css来包含子容器

.group:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

---

当浏览器处于怪癖模式时，事情有点奇怪，至少在IE中是这样。如果您指定一个严格的DTD，事情就会像您在IE 8、FF 3.6.4和Chrome 5中所期望的那样工作。它在Chrome中仍然有效，但是添加doctype并没有什么坏处。我不能说IE6或IE7——我不使用它们，也不能不购买更多的计算机或使这台计算机不稳定，所以我不是有意支持它们

我使用的测试页面：

<div style="width: 300px; border: 1px solid black">
 Some text
 <input type="button" 
       style="float: right; width: 50px; margin-right: 10px"
       value="test">
</div>

如果没有doctype，该按钮将出现在IE 8的下一行。一旦我在页面顶部添加，它就会出现在同一行上

---

但是，IE的旧版本不知道HTML5，因此上面的doctype行必须是完整的HTML4严格版，或者可能是过渡版。即便如此，在较旧的浏览器中也可能会有问题，正如我所说，我无法测试。

当浏览器处于怪癖模式时，情况有点奇怪，至少在IE中是这样。如果您指定了一个严格的DTD，那么在IE 8、FF 3.6.4和Chrome 5中，情况会像您所期望的那样工作。它在Chrome中仍然有效，但是添加doctype并没有什么坏处。我不能说IE6或IE7——我不使用它们，也不能不购买更多的计算机或使这台计算机不稳定，所以我不是有意支持它们

我使用的测试页面：

<div style="width: 300px; border: 1px solid black">
 Some text
 <input type="button" 
       style="float: right; width: 50px; margin-right: 10px"
       value="test">
</div>

如果没有doctype，该按钮将出现在IE 8的下一行。一旦我在页面顶部添加，它就会出现在同一行上

---

但是，IE的旧版本不知道HTML5，因此上面的doctype行必须是完整的HTML4严格版，或者可能是过渡版。即使如此，在较旧的浏览器中也可能会有问题，正如我所说，我无法测试。

按钮未与div元素内的内容内联的原因是，您需要在div内的元素上设置一个固定的宽度

---

按钮未与div元素内的内容内联的原因是，您需要在div内的元素上设置一个固定的宽度

---

浮动非常奇怪，因为它们的行为不可预测。你可能希望花车留在父母家里，但他们没有。坦率地说，浮动行为是非常不直观的。在下面的示例中，父对象为teal，浮点为紫色

示例代码 其呈现为：

总结

---

经验法则是，浮动只允许浮动元素下方的块流动。对于共享同一行的两个项目，您必须向左浮动两次，向右浮动一次，或者先放置浮动。此外，如果您希望父对象包含浮动，则必须在父对象的结束标记之前添加一个clear。

浮动非常奇怪，因为它们的行为不可预测。你可能希望花车留在父母家里，但他们没有。坦率地说，浮动行为是非常不直观的。在下面的示例中，父对象为teal，浮点为紫色

示例代码 其呈现为：

总结

---

经验法则是，浮动只允许浮动元素下方的块流动。对于共享同一行的两个项目，您必须向左浮动两次，向右浮动一次，或者先放置浮动。此外，如果您希望父对象包含浮动，则必须在父对象的结束标记之前添加一个清除标记。

您的div上有高度吗？您的div上有高度吗？浏览器IE未处于“怪癖”模式。它也可以在FF中工作，FF没有怪癖模式。我所知道的是，当我在测试页面中添加一个严格的doctype声明时，问题就消失了。这向我表明问题在于IE的怪癖模式。FF也有一个怪癖模式，但它的工作方式不同-怪癖模式的一点是，它在每个浏览器中是不同的。浏览器IE不在怪癖模式。它也可以在FF中工作，FF没有怪癖模式。我所知道的是，当我在测试页面中添加一个严格的doctype声明时，问题就消失了。这向我表明问题在于IE的怪癖模式。FF也有一个“怪癖”模式，但它的工作原理不同——怪癖模式的一点是，它在每个浏览器中都是不同的。@Tony_Henrich，当你将某个东西浮动起来时，它会

---

通常会从父对象的框中弹出，父对象的边框将塌陷，直到它们碰到非浮动的子内容。如果要防止出现这种情况，请添加一个块元素，并使用clear:both；在浮动元素和父元素的结束标记之间。请参见我的添加。您的答案没有说明将浮动元素作为第一个元素与将最后一个元素放在其自然位置之间的区别。@Tony_Henrich当您浮动某个元素时，它通常会从父元素的框中弹出，父元素的边框将塌陷，直到它们碰到非浮动的子元素内容。如果要防止出现这种情况，请添加一个块元素，并使用clear:both；在浮动元素和父元素的结束标记之间。请参见我的添加。您的答案没有说明将浮动元素作为第一个元素与将最后一个元素作为其自然位置之间的区别。

<div class="parent">
<p>Paragraph 1</p>
<p class="float" style="float: left;">Paragraph 2</p>  <!-- Float left -->
<p class="float">Paragraph 3</p>
<div class="clear"></div>
</div>