CSS 浮动和动态内容答案

【问题标题】：CSS Floats And Dynamic ContentCSS 浮动和动态内容
【发布时间】：2011-07-20 02:37:54
【问题描述】：

我有一个顶部有一个导航栏的页面。导航栏中有 2 组菜单 (ul)。一组向左浮动，另一组向右浮动。然后在整个菜单下方，是内容，在流程中。

问题是，导航菜单将具有动态内容。所以他们需要：

随着内容的增长将内容向下推送
不能有固定的高度。

有什么方法可以做到这一点，但菜单的“效果”会浮在页面的另一侧？

【问题讨论】：

您有什么可以向我们展示以帮助澄清的吗？也许你已经完成了一半？如果没有，画一张图片可能会有所帮助。

标签： css css-float dynamic-content

【解决方案1】：

将overflow: auto; 添加到DIV 或两个导航UL 周围的任何容器元素。

#header { overflow: auto; }

<div id="header">
 <ul id="primaryNav">...</ul>
 <ul id="secondaryNav">...</ul>
</div>

<div id="content">...</div>

【讨论】：

+1 因为这是正确的方法，但某些浏览器还需要指定 width 才能正确清除浮动。在这里找到：quirksmode.org/css/clearing.html

【解决方案2】：

使用这个 css 并给这些 UL（导航栏）类的父类 clearfix。这样您就不必指定固定高度，它们会将内容向下推。

你需要的 CSS：

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

【讨论】：