浮动后的Div折叠 css[英] Div collapse after float css

问题描述

我有一个名为nav的div，在导航内部，我有一个带有5 li的UL，我在左侧漂浮着，li是，但是当我这样做时，导航崩溃了.我知道这一点，因为我在NAV周围放置边框，看看它是否崩溃了.这是一个例子.

倒闭

no collapsed http://img71.imageshack.us/img71/mimg71/879/nocolapsedkx7. PNG

正如您在第一张图像中看到的那样，NAV DIV中的链接向左漂浮， 黑色边框向上是称为NAV的实际Div.

在此图像中，您可以看到它具有顶部和底部边框，并且不会崩溃.

这是我使用的一些HTML和CSS.

alt Text Text http://img301.imageshack.us/img301/img301/5514/codejc8. PNG

#nav #ulListNavi  a  {
    float: left;
}

推荐答案

除了visible以外的任何overflow的值

div#nav { overflow:auto; }

然后添加width以还原宽度

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

其他推荐答案

一种解决方案是在最后一个浮动锚点之后向元素添加"清晰:两者"样式，例如:

<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.sitepoint. com/blogs/2005/02/26/simple-clearing-of-floats/

关于最好的做法，这几乎是一场圣战，纯粹主义者会害怕额外的div，如果您不被一些额外的标记所困扰，那是约书亚和AJ建议的清除div的添加会正常工作，并且是一种可靠的技术，但是至少还有17种其他方法...

本文地址：https://www.itbaoku.cn/post/565532.html