使用float属性的元素后面的内容会发生什么

Question

刚刚在stackoverflow上看到question。

请考虑标记：

<div id="box_wrap">
    <div id="box1">
        <h2>Box1 text</h2>
        <p>Lorem Ipsum</p>
    </div>
    <div id="box2">
        <h2>Box2 text</h2>
        <p>Lorem Ipsum</p>
        <p>Text</p>
    </div>
</div

CSS ：

#box1 {
    background-color: blue;
    width: 30%;
    float: left;
}

#box2 {
    background-color: red;
    width: 30%;
}

div出现在另一个上面，即（corresponding fiddle）

但是当我给#box2宽度高于#box1的宽度，即width:34%时，会发生这种情况：（corresponding fiddle）

并且对于更高的#box2宽度（相对于#box1的宽度），即width:50%，最终会出现所需的效果。 （corresponding fiddle）

注意蓝框即float:left的框，即#box1有width:30%和红框即没有浮动属性的框，#box2有width:50%，仍为蓝色变得比红色大。

此外，对于没有宽度或width:auto #box2，它会产生预期的效果。

预期效果：#div2应与#div1

右侧对齐

任何人都可以向我解释一下，发生了什么？我错过了什么？

（也不知道如何用合适的标题提出这个问题）

Answer 1

浮动元素之后的元素将其内容包裹在浮动元素周围。 在第一种情况下，当两个div具有相同的宽度时，第二个div不能包围第一个div，因为一个东西必须更宽（更大）然后它必须包裹自己的东西。

在你的第二种情况下，box2比box1宽，并尽可能地将其内容包装在box1周围。

在第三种情况下，当box2比box1宽得多时，它仍然围绕着box1，但是在box1下面没有足够的内容显示。向box2添加更多内容将使您明确http://jsfiddle.net/GbDqT/4/。这个jsfiddle包含width: auto用于box2和一些额外的内容。

更新：box2 出现的原因不如box1宽，是因为（你可以想象）box1 覆盖在顶部box2。所以box2的大部分都隐藏在box1下面，但是box2的内容因为浮动框1而被推向右边

<强>来源：developer.mozilla