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

它清除因浮动而添加的格式：左或浮动：右边的前一个标记。

Answer 3

就加价而言 - 特别是当你进一步发展时 - 你的页脚可能不会立即跟随你的导航。所以在导航上放一个clearfix。不要依赖最终版本中可能存在或不存在的页脚（或任何其他元素）进行清理浮动的脏工作。

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

有CSS溢出问题：隐藏

3 个答案:

---------