遇到 CSS 溢出问题：隐藏

Question

我有一些脚本在功能方面似乎可以完美运行：

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

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

我怎样才能让它在视觉上看起来正确并让它也能正常工作？

Answer 1

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

像这样

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

Live Demo

---------

或者这里是第二个选项

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

Live Demo

Answer 2

将clear:both 添加到页脚类：

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

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

Answer 3

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

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