div不会浮动在前面的非浮动div旁边

Question

所以我正在摆弄CSS并且前几天漂浮并偶然发现一个奇怪的行为（坦率地说，我很惊讶我之前没有遇到过它）。我对它的原因（以及为什么我还不知道......）感到困惑。

如果你有一个div（让我们称他为鲍勃）并且你试图将他漂浮在另一个div（吉米）旁边，它只会在

1. 吉米也漂浮
2. 吉米来自鲍勃

所以如果我们有：

<div class="container">
    <div id="one">Main Content 1</div>
    <div id="two">Sidebar 1</div>
</div>

带

.container { 
    overflow:hidden; /* this essentially clears the floats. You could remove it and add a clearfloat div instead */
    margin-bottom:10px;
}
#one {
    background-color:red;
    margin-right:50px;
}
#two {
    width:50px;
    float:right;
    background-color:blue;
}

我们得到了; 但如果我们只是交换#one和#two，请保持相同的CSS：

<div class="container">
    <div id="two">Sidebar 2</div>
    <div id="one">Main Content 2</div>
</div>

我们得到：

为什么呢？我确定它与盒子模型和float的定义有关，这很简单（这让我觉得很蠢），但是什么？

你可以摆弄它here

Answer 1

如果您删除了margin-right:50px;，那么对您来说更有意义：）

按定义，块元素占用父容器的整个宽度。即使你给它一个定义的宽度，这只是计算宽度的直观表示，并不影响盒子模型。

浮动元素就是这样，但它浮动在父元素中第一个可用的可浮动空间。在示例一中，它位于第一个块元素下方。在示例二中，它位于顶部。

如果您想在示例1中获得示例2的结果，只需将float:left;添加到#one。

Answer 2

这是预期的行为。

首先要记住浮动元素不是正常流程的一部分。其余的是以下规范：

  

浮动框向左移动   或直到其外缘接触   包含块边缘或外部   另一个浮动的边缘。如果有的话   线盒，浮动的外顶部   框与顶部对齐   当前的行框。

基本上，您的第二个示例将div#two拉出文档流并将其向右移动，直到它触及其兄弟div#one的外边缘。由于它有margin: 50px;，因此div#two有足够的空间来适应。

您的第一个示例div#one已经清除 行作为块级元素，因此div#two向右浮动并且与当前行的顶部对齐。

从W3C CSS2.1 Specification on Floats

了解详情