CSS浮动后Div折叠

Question

我有一个名为NAV的DIV，其中包含一个UL和5个LI，我将它们设置为向左浮动，但是当我这样做时，NAV就会折叠。我知道这一点是因为我在NAV周围添加了边框来查看它是否折叠，而它确实折叠了。以下是示例。 collapsed http://img401.imageshack.us/img401/8867/collapsedze4.png no collapsed http://img71.imageshack.us/img71/879/nocollapsedkx7.png 如您在第一张图片中看到的那样，NAV div中的链接被向左浮动，而黑色边框位于实际的NAV div上方。

在此图像中，您可以看到它具有顶部和底部边框，并且没有折叠。

以下是我使用的一些HTML和CSS。 alt text http://img301.imageshack.us/img301/5514/codejc8.png

#nav #ulListNavi  a  {
    float: left;
}

- user36682

---

问题在哪里？我没有找到问号，也无法理解你的问题（如果有的话）。 - Kevin Le - Khnle

虽然我从这个“问题”中得到了我需要的答案，但我发现它很难理解。 - Kit Roed

Answer 1

在您的容器中添加任何overflow值，除了visible：

div#nav { overflow:auto; }

接着添加width以恢复宽度。

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

- Ken

---

这是我一直在使用的实践方法，看起来是最优雅的。 - Bart

@YuriKolovsky - 没有完美的事物！为什么不添加您的答案呢？但要赶快，因为这个问题已经开放了三年半... - Ken

@Ken 那又怎样？我现在才发现这个问题，希望其他现在开始发现它的人也意识到这个问题，迟到总比不到好。 - Timo Huovinen

@YuriKolovsky 抱歉，我说三年半的评论更多是针对user36682的。但是说真的，如果你有更好的答案，应该添加它（或编辑我的答案以改进它）-这就是这个地方的全部意义。 :) - Ken

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>

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

- AJ

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种其他方法可以实现...

- seanb

Answer 4

在您的ul后添加以下代码：

<div style="clear: both"></div> 

- Joshua Brickner

Answer 5

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

- dylanfm

Answer 6

不需要清除元素或溢出。添加以下内容：

#nav {
    float: left;
}

当您浮动LI时，＃nav不再“包含”任何内容，因此它会折叠。但是如果＃nav也被浮动，则它包含其中浮动的任何内容，因此它会再次扩展。

（还可以考虑删除＃nav div并将相同的样式应用于UL。）

- Doug

---

这是最好的答案。只需浮动外部 div 即可。没有理由浮动锚点。虽然值得一提的是，问题并未说明需要浮动任何内容。 - Jason Capriotti

Answer 7

你的问题是因为你浮动了 <A> 元素，但每个元素都在 <LI> 元素内部。LI 默认显示为块级元素，所以每个 <LI> 强制其子元素 <A> 从新行开始。

如果你浮动 <LI>，我认为你会解决问题。

#nav #ulListNavi  li  {
    float: left;
}

- Mark Nielsen

Answer 8

最快的解决方案是在父元素上添加overflow:hidden，以清除浮动效果：

#nav{overflow:hidden;}

- Rima Gerhard

Answer 9

不更改您的HTML：

#nav
{
    width: 100%;
    overflow: auto;
    border: solid 1px red;
}
#ulListNavi
{
    margin: 0;
    padding: 0;
    list-style: none;
}
#nav #ulListNavi li
{
    float: left;
}
#nav #ulListNavi li a
{
    margin-left: 5px;
}

在IE8和FF 3.5中可用

- Chris