Question

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

collapsed http://img401.imageshack.us/img401/8867/collapsedze4.png

no collapsed 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>

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

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

在ul：

之后添加此代码

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

Answer 5

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

Answer 6

不要打扰清除元素或溢出。加上这个：

#nav {
    float: left;
}

当你浮动LI时，＃nav不再“包含”任何东西，因此它会崩溃。但是如果#nav也浮动，它包含浮在其中的任何东西，所以它会再次扩展。

（另请考虑删除#nav div并将相同的样式应用于UL。）

Answer 7

您的问题是因为您正在浮动<A>元素，但每个元素都位于<LI>元素内。默认情况下，LI会显示为块，因此每个<LI>都会强制其子<A>在新行上开始。

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

#nav #ulListNavi  li  {
    float: left;
}

Answer 8

最快的解决方案是添加overflow：hidden来清除父元素上的浮点数：

#nav{overflow:hidden;}

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

浮动css后Div崩溃

9 个答案: