CSS浮动和动态内容

Question

我有一个页面，其顶部有一个导航栏。在导航栏中有两组菜单（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%; 
}