浮動div不重疊

Question

我有3 <div> s，我需要把第二個在右邊，所以我用#two {float:right;}。

這是我的current result：#one在左側，#two在右側;既按預期。問題是#three漂浮了。

我試圖把#one和#two放在一個單獨的div中，但是#three，但問題仍然存在。

這是我的expected result：#three的頂部應該與#two的底部處於相同的垂直位置。

Answer 1

你需要清除浮動（#three { float:left; clear:both; }），你不需要<br>格後1

Here是工作提琴。

或者，你可以跳過添加CSS完全的div 3，並使用：

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

Here是。

Answer 2

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

見DEMO

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

您可以添加一個容器周圍1區和3左浮動，而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; 
}