使用清晰：既可以使div滿高度的內容？

Question

在任何浮動內容之後，您是否需要使用諸如<div style="clear:both">&nbsp;</div>之類的內容來確保您的div達到您的內容的全部高度，還是有更簡單的方法來執行此操作？

下面是目前使用

HTML

<div class="socialmedia"> 
<h2>Stay Connected</h2> 
<ul> 
<li><img src="images/twitter.png" width="32" height="32" alt="Twitter" /></li> 
<li><img src="images/googleplus.png" width="32" height="32" alt="Google Plus" /></li> 
<li><img src="images/behance.png" width="32" height="32" alt="Behance" /></li> 
<li><img src="images/dribble.png" width="32" height="32" alt="Dribble" /></li> 
<li><img src="images/pinterest.png" width="32" height="32" alt="Pintrest" /></li> 
<li><img src="images/email.png" width="32" height="32" alt="Email" /></li> 
</ul> 
<div style="clear:both">&nbsp;</div> 
</div><!-- close social media --> 

CSS

.socialmedia { 
width:960px; 
background-color:#C69; 

} 

.socialmedia ul { 
margin:0; 
padding:0; 
clear:both; 
} 


.socialmedia ul li { 
float:left; 
list-style:none; 
margin-right:20px; 
} 

Answer 1

您可以添加溢出代碼IM：自動到你的DIV容器。

Answer 2

您可以給.socialmedia一種overflow:hidden的樣式並刪除清除div。

Answer 3

添加

.socialmedia ul:after { 
    content:''; 
    display:block; 
    clear:both; 
} 

Answer 4

使用li { display: inline-block; } - 就定心您的清單給你的靈活性，並且不需要任何浮動結算方法。

參見：http://jsfiddle.net/Wexcode/NKzm2/

注意，在我加入ul { font-size: 0; }小提琴 - 這是否定的事實是內聯元素引起標記空白顯示，如果他們的字體大小不爲零。