1

我有一些脚本似乎可以完美地发挥功能：

HTML：

<div class="navigation1">icon Home</div>
<div class="dropdown">
    <div class="items">icon Default 1</div>
    <div class="items">icon Reports 1</div>
    <div class="items">icon Other 1</div>
</div>

CSS：

.menu {
    margin:auto;
    /*overflow:hidden;*/
    position: relative;
    background:#CCCCCC;
}

但从视觉上看，一切都出错了。从这个 jsFiddle可以看出，菜单和页脚的布局似乎不正确。当我取消注释时/*overflow:hidden;*/，在视觉上它看起来很完美，但.dropdown似乎隐藏在.footer.

我如何让它在视觉上看起来正确并让它也能正常工作？

4

3 回答 3

3

现在定义你的.menu:after 一些 CSS 属性

像这样

.menu:after {
    clear: both;
    content: "";
    display: block;
    overflow: hidden;
}

现场演示

---------

或这里的第二个选项

HTML

<br />
<div class="header">header</div>
<div class="menu">
    <div class="navigation1">icon Home</div>
    <div class="dropdown">
        <div class="items">icon Default 1</div>
        <div class="items">icon Reports 1</div>
        <div class="items">icon Other 1</div>
    </div>
    <div class="navigation2">icon Home</div>
    <div class="dropdown drop2">
        <div class="items">icon Default 2</div>
        <div class="items">icon Reports 2</div>
        <div class="items">icon Other 2</div>
    </div>
    <div class="clr"></div>  // add this line here 

</div>
<div class="footer">footer</div>

CSS

.clr{
clear:both;
}

现场演示

于 2012-11-26T10:58:26.193 回答
2

添加clear:both到页脚类：

.footer
{
    background:#AAAAAA;
    clear:both;
}

它清除由于 float:left 或 float:right 添加到先前标签的格式。

于 2012-11-26T10:53:50.000 回答
0

在标记方面 - 特别是当您进一步开发时 - 您的页脚可能不会立即跟随您的导航。因此，请改为在导航上放置一个 clearfix。不要依赖最终构建中可能存在或不存在的页脚（或任何其他元素）来完成清除浮动的肮脏工作。

编辑：似乎 Rohit Azad 和我自己在相似的时间想出了相同的答案。听从他的建议。

于 2012-11-26T10:58:51.043 回答