css - CSS 浮动和动态内容

Question

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

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

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

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

Answer 1

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

#header { overflow: auto; }

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

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

Answer 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%;
}