浮动css后Div崩溃

我有一个名为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;
}

Ken.. 36

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

div#nav { overflow:auto; }

然后添加width以恢复宽度

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

@YuriKolovsky - 没有什么是完美的!为什么不添加你的答案？但是快点,因为这个问题已经开放了3年半...... (2认同)

---

Abram Simon.. 15

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

  

    
Home
    
Search
    
Flowers
    
My Account
    
Contact Us
  
  

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

1> Ken..：

---

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

div#nav { overflow:auto; }

然后添加width以恢复宽度

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

---

@YuriKolovsky - 没有什么是完美的!为什么不添加你的答案？但是快点,因为这个问题已经开放了3年半......

2> Abram Simon..：

---

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

  

    
Home
    
Search
    
Flowers
    
My Account
    
Contact Us
  
  

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

3> seanb..：

---

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

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

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

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