奇怪的佈局行爲

我有點困惑。這是一個小型網頁。有兩個主要的div-s：top和mainBlock。
首先包含圖像。問題是，螢火蟲顯示div＃top的高度等於0，因此下一個div mainBlock向上移動。如果我刪除這段代碼：奇怪的佈局行爲

div#logo{ 
    float: left; 
}

一切都將開始工作正常和div＃mainBlock將低於div＃頂部。你能否向我解釋它是如何工作的以及如何以正確的方式避免這種情況？

這裏是我的代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
<title>Paralab - Website &amp; interface design, web apps development, usability</title> 
<style text="text/css"> 
html, body{ 
} 
div#logo{ 
    float: left; 
} 
#top{ 
    width: 100%; 
} 
#mainBlock{ 
    width:100%; 
} 
</style> 
</head> 
<body> 
    <div id="top"> 
     <div id="logo"> 
      <img alt="logo" src="img/logo.png" /> 
     </div> 
    </div> 
    <div id="mainBlock"> 
     Contact Us 
    </div> 
</body> 
</html>

來源

2010-06-08 andrii