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

本文是小编为大家收集整理的关于浮动后的Div折叠 css的处理方法,想解了浮动后的Div折叠 css的问题怎么解决?浮动后的Div折叠 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