奇怪的布局行为

我有点困惑。这是一个小型网页。有两个主要的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