在浮动css后div崩溃

2018-07-01 17:30:46

我有一个名为NAV的div，在NAV的内部，我有一个5Li的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。

替代文字http://img301.imageshack.us/img301/5514/codejc8.png

#nav #ulListNavi  a  {
    float: left;
}

将除visible之外的任何overflow值添加到您的容器中：

div#nav { overflow:auto; }

然后添加width以恢复宽度

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

一种解决方案是在最后一个浮动锚点之后向元素添加“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>

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

在这里清除浮动的一些其他选项：

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

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

至于最好的方式，这几乎是一场神圣的战争，纯粹主义者会对额外的div感到不满，如果你没有被一些额外的标记所困扰，那么按照Joshua和AJ的建议添加清除的div将会工作得很好，并且是一项可靠的技术，但至少有17种其他方式可以做到这一点......

链接地址: http://www.djcxy.com/p/88469.html

上一篇: Div collapse after float css

下一篇: Absolute positioned div inside a relative positioned div