1

刚刚看到一个关于stackoverflow的问题。

考虑以下标记：

<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 一个接一个出现，即（相应的小提琴）

在此处输入图像描述

但是当我给出#box2的宽度高于#box1iewidth:34%时，就会发生这种情况：（相应的小提琴）

在此处输入图像描述

并且对于更高的宽度#box2（与相比#box1） ie width:50%，最终会出现所需的效果。（相应的小提琴）

在此处输入图像描述

请注意，蓝色盒子即带有float:leftie #box1haswidth:30%的盒子和红色盒子，即没有浮动属性的盒子，ie #box2has width:50%，仍然蓝色渲染得比红色大。

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

期望的效果：#div2应该对齐到右边#div1

谁能给我解释一下，发生了什么？我错过了什么？

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

4

1 回答 1

1

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

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

在第三种情况下，当 box2 比 box1 足够宽时，它仍然环绕在 box1 周围，但没有足够的内容显示在 box1 下方。向 box2 添加更多内容将使您清楚http://jsfiddle.net/GbDqT/4/。这个 jsfiddle 包含width: autobox2 和一些额外的内容。

更新： box2看起来比 box1 宽的原因是（你可以想象）box1覆盖在 box2 的顶部。所以box2的大部分都隐藏在box1下面，但是box2的内容却因为box1的浮动而向右推

来源：developer.mozilla

于 2013-04-14T13:56:36.647 回答