浮动css后Div崩溃

Question

我有一个名为NAV的div,在NAV内部我有一个5升的UL,我向左浮动,但是当我这样做时,NAV会崩溃.我知道这是因为我在NAV周围放了一个边框,看看它是否会崩溃.这是一个例子.

折叠了http://img401.imageshack.us/img401/8867/collapsedze4.png

没有倒塌http://img71.imageshack.us/img71/879/nocollapsedkx7.png

正如您在第一张图片中看到的那样,NAV div中的链接向左浮动,而黑色边框ontop是名为NAV的实际div.

在此图像中,您可以看到它是如何具有顶部和底部边框,并且它没有折叠.

这里是我使用的一些html和css.

alt text http://img301.imageshack.us/img301/5514/codejc8.png

#nav #ulListNavi  a  {
    float: left;
}

Answer 1

添加overflow除visible容器之外的任何值:

div#nav { overflow:auto; }

然后添加width以恢复宽度

div#nav { width: 100%; overflow:auto; }

Answer 2

一种解决方案是在最后一个浮动锚之后向元素添加"clear:both"样式,例如:

<div id="nav">
  <ul id="ulListNavi">
    <li><a href="#">Home</a></li>
    <li><a href="#">Search</a></li>
    <li><a href="#">Flowers</a></li>
    <li><a href="#">My Account</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
  <div style="clear:both;"></div>
</div>

这会导致包含元素在关闭包含框之前清除所有浮动元素.

Answer 3

清除浮动的其他一些选项:

http://www.quirksmode.org/css/clearing.html

http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/

关于做到这一点的最佳方式,这几乎是一场神圣的战争,纯粹主义者会对额外的div感到厌恶,如果你没有被一点额外的标记所迷惑,那么Joshua和AJ所建议的清除div的加入将会很好,并且是一种可靠的技术,但至少还有其他17种方法......

Answer 4

也尝试将包含元素浮动到左侧。