html - CSS floating elements causes other element background colors to disappear -

i testing out css , seeing how works floating elements in horizontal menue:

<ul id="navlist">     <li><a href="#">item one</a></li>     <li><a href="#">item two</a></li>     <li><a href="#">item three</a></li> </ul>  ul#navlist {     list-style-type: none;     margin: 0;     padding: 0;     background-color: cyan; } ul#navlist li {     display: inline;     background-color: pink; }  /*ul#navlist li {     float:left; }*/ 

i use background colors visually see affected. here output:

output

notice left gap between list items. when un-comment/insert the following line:

ul#navlist li {         float:left;     } 

the gap disappears (what intended) background colors both ul , li disappear. output why this?

the background despairing because content floating, parent's height gets zero. in practical terms, link it's anchored on <li> , not inside it, got it?!

change <li> display type inline-block and, optionally, set height <li> elements.