Having issues with CSS overflow:hidden

问题

I have some script which seems to work perfectly functionality wise:

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

Visually though, it all goes wrong. As you can see from this jsFiddle, the menu and the footer seem to be laid out incorrectly. When I uncomment /*overflow:hidden;*/, visually it looks perfect, but the .dropdown seems to get hidden behind the .footer.

How do i get this to look right visually and get it to function correctly too?

回答1:

Now define your .menu:after some css properties

as like this

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

Live Demo

---------

Or 2nd option here

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

回答2:

Add clear:both to footer class:

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

It clears formatting added due to float:left or float:right to previous tags.

回答3:

In terms of mark up - especially as you develop this further - your footer might not immediately follow your navigation. So put a clearfix on the navigation instead. Don't rely on the footer (or any other element) which may or may not be present in your final build to do the dirty work of clearing your floats.

EDIT: Seems that Rohit Azad and myself came up with the same answer at similar times. Follow his advice.

来源：https://stackoverflow.com/questions/13563266/having-issues-with-css-overflowhidden

标签

jquery

html

css

google-chrome

internet-explorer-8