Why "float" in css destroys background color

Question

When I use this, the background color works

    header {
        background-color: #bab615;

    }
    nav {
        background: #f96e5b;
        width: auto;
    }
    nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
        line-height: 1;
        display: block;
        zoom: 1;
    }

but if I add a float to "nav ul", for example. sail left; then it makes the background color of both elements white ... Why?

     header {
        background-color: #bab615;

    }
    nav {
        background: #f96e5b;
        width: auto;
    }
    nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
        line-height: 1;
        display: block;
        zoom: 1;
        float: left; <---This
    }

Edit: changed #cssmenu to nav since it is nav in html Edit # 2: jsfiddle.net/5vjor56y

Answer 1

It looks like you need to clear the floating elements in nav.

You can do this inside css as follows:

nav {
  overflow: hidden;
}

It uses "clearfix". This is another way to do this:

.nav:after {
  content: "";
  display: table;
  clear: both;
} 

clearfix, , , html, . , , . css .

Answer 2

.

<div style="clear:both;"></div>

<br clear="all" />

- . (), :

<nav>
    <ul>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    </ul>
    <div style="clear:both;">
</nav>