이상한 레이아웃 동작

조금 혼란 스럽네요. 다음은 작은 웹 페이지입니다. 두 개의 주요 div가 있습니다 : top과 mainBlock.
첫 번째 이미지가 포함되어 있습니다. 문제는 방화 광이 div # top의 높이가 0과 같아서 다음 div mainBlock이 위로 올라간다는 것입니다. 나는이 코드 조각을 제거 할 경우이상한 레이아웃 동작

div#logo{ 
    float: left; 
}

모든 사업부 번호의 맨 아래에있을 것입니다 벌금과 DIV #의 mainBlock 작업이 시작됩니다. 너는 어떻게 작동하는지, 그리고 이것을 어떻게 적절하게 피하는 지 설명해 주시겠습니까? - 당신의 mainBlock 클래스에 clear:left; 추가가 떠 있기 때문에

<!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