Question

您是否需要在任何浮动内容之后使用<div style="clear:both"> </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

您可以将overflow：auto添加到容器DIV。

Answer 2

您可以为.socialmedia提供overflow:hidden样式并删除清算div。

Answer 3

使用li { display: inline-block; } - 为您提供列表中心的灵活性，并且不需要任何浮动清算方法。

请参阅：http://jsfiddle.net/Wexcode/NKzm2/

请注意，在小提琴中我添加了ul { font-size: 0; } - 这是为了否定内联元素导致标记中的空格在字体大小为非零时显示的事实。 < / p>

Answer 4

添加

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

使用clear：两者都使div满内容高度？

4 个答案: