html - clear:both を使用して 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

コンテナー DIV に overflow:auto を追加できます。

Answer 2

クリア div.socialmediaのスタイルを指定して削除できます。overflow:hidden

Answer 3

使用li { display: inline-block; }-リストを中央に配置する限り柔軟性があり、フロートクリア方法は必要ありません。

参照： http： //jsfiddle.net/Wexcode/NKzm2/

私が追加したフィドルに注意してくださいul { font-size: 0; }-これは、インライン要素がフォントサイズがゼロ以外の場合にマークアップの空白を表示するという事実を否定するためです。

Answer 4

追加

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