为什么`float:left`不适用于固定宽度？

Question

我在网页上有两个div,我希望它们都有一个固定的宽度,并希望第一个div浮动到第二个div的左边.

这听起来很简单,我以下Markup和CSS会给我想要的结果:

<div class="left">Content</div>
<div class="right">Content</div>

div.left {
    float: left;
    width: 200px;
}

div.right {
    width: 200px;

这不会按预期工作,而是在下一行显示正确的div,就像它没有浮动一样.在此示例网页中最好地解释了这一点:

问题的例子

我的问题是为什么这不能按预期工作？不是如何解决它.

笔记:

• 在回答此问题之前,请确保您完全了解浮动的工作原理.
• 请确保您查看并了解示例.
• 两个元素必须是块,而不是内联.
• 我理解所有修复/黑客使这项工作.我想知道为什么它不起作用.
• 这似乎只能在Opera中正常工作.
• 需要用文档备份答案.

Answer 1

在我看来,这是一个简单的规则,阻止,除非浮动,总是开始一个新的线.w3.org/TR/CSS2/visuren.html#block-formatting section 9.4.1 -