html - 没有重叠的浮动div

Question

我有 3 个<div>，我需要把第二个放在右边，所以我用#two {float:right;}.

这是我目前的结果：#one在左边，#two在右边；两者都符合预期。问题是#three浮起来。

我试图将#oneand#two放在一个单独的 div#three中，但问题仍然存在。

这是我的预期结果：顶部#three应该与底部处于相同的垂直位置#two。

Answer 1

您可以clear:both在 div3 上添加一个。

见演示

Answer 2

您需要清除浮动（#three { float:left; clear:both; }），并且不需要<br>后 div 1。

这是一个工作小提琴。

或者，您可以完全跳过将 CSS 添加到 div 3，并使用：

<div id='one'>1</div>
<div id='two'>2</div>
<br clear="all">
<div id='three'>3</div>

就是这样。

Answer 3

我认为这就是你想要做的

http://jsfiddle.net/DrYgu/

<div id="container">
    <div id='one'>1</div>
    <div id='three'>3</div>
</div>
<div id='two'>2</div>
<div class="clear"></div>

#container {
    width:60px;
    float:left;
}
#one, #two, #three {
    border:1px solid black;
    width:60px;
    height:100px;
    margin:2px;
    display:inline-block;
}
#two {
    height:185px;
    float:right;
}
.clear {
    clear:both;
}

Answer 4

您可以在 div 1 和 3 周围添加一个容器并向左浮动，而 div 2 可以向右浮动。

<div id="container">
    <div id="one">
    </div>
    <div id="three">
    </div>
</div>
<div id="two">
</div>  
 #two{
    float:right;
    height:180px;
    width:100px;
    border:1px solid blue;
}

#container{
    float:left;
    height:180px;
    border:1px solid green;
    width:100px;
}