奇怪的HTML/CSS行爲

Question

我有以下HTML：

<div id="red-header"></div> 
<h1 id="emp-name">Employee Name</h1> 

    <div id="midbar" class="bar"></div> 

<div id="emp-spotlight-content" class="clearfix"> 
    <div id="emp-pic-large" class="column clearfix"> 
    <img src="employeePictures/EmployeeImage.jpg"> 
    </div> 

    <div id="bio" class="column"> 
    <ul> 
     <li><strong>Team Member Since:</strong> August 2011</li>  
     <li><strong>Born in:</strong> LOCATION</li> 
     <li><strong>Birthday:</strong> BIRTHDAY</li> 
     <li><strong>Family:</strong> FAMILY</li> 
     <li><strong>Facts:</strong></li> 
     <ul> 
      <li>FACT 1</li> 
      <li>FACT 2</li> 
      <li>FACT 3</li> 
     </ul> 
    </ul> 
    </div> 
</div> 

<div id="footer" class="bar"></div> 

用下面的CSS：

.bar { 
height: 3px; 
width: 692px; 

background-image: url("shortredbar.jpg"); 
background-repeat: repeat-x; 
} 

#footer { 
height: 3px; 
width: 692px; 

background-image: url("shortredbar.jpg"); 
background-repeat: repeat-x; 
} 

#red-header { 
height: 40px; 
width: 692px; 
background-image: url("redbar.jpg"); 
background-repeat: repeat-x; 
} 

#emp-name { 
width: 692px; 
text-align: center; 
} 

#emp-spotlight-content { 

} 

.column { 
width: 306;    /* 692px/2 - (40) */ 
padding: 5px; 
margin: 10px; 
} 

#emp-pic-large { 
width: 306px; 
float: left; 
} 

#bio { 
float: left; 
} 

兩者中杆和頁腳基本上是同樣的事情，纔剛剛在鑑別我需要改變它們。一個應該在內容的上方，另一個應該在內容的底部，但它們都顯示在堆疊在彼此之上的內容的頂部。

任何人都可以看到我失蹤了嗎？

Answer 1

試着把overflow: hidden;放在您的#emp-spotlight-content上。它看起來像是摺疊到0的高度，並且會強制它將內容包裝到它的內部。