float元素的神祕

Question

我有以下標記：

<div id="container"> 
    <div id="sidebar"> 
    <h2>Sidebar</h2> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p> 
    </div> 
    <div id="main"> 
    <h2>Main</h2> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p> 
    </div> 
</div> 

與以下樣式：

#sidebar { 
    background: #e3e3e3; 
    float: left; 
} 
#main { 
    background: #666; 
} 

，我期待着與ID欄div來繼續與ID主頂部和隱藏股利。我的邏輯是 - 與ID側邊欄的div浮動，並從正常流程中刪除，因此與ID主要div應採取其立場。但是，所有瀏覽器都顯示帶有ID側邊欄的ID低於div的div的div，就好像沒有浮動一樣。

Answer 1

您需要清除#sidebar之後的float。

HTML：

<div id="sidebar"> 
    .... 
</div> 
<div class="clr"></div> 
<div id="main"> 
    .... 
</div> 

CSS：

.clr{clear:both;} 

DEMO here.