проблема с фона цвета при использовании поплавка: левый

Question

CSS:

ul#navlist { 
    list-style-type: none; 
    padding: 0; 
    margin: 0; 
    float: left; 
    width: 100%; 
    color: #fff; 
    background-color: #036; 
} 

ul#navlist li { 
    display: inline; 
} 

ul#navlist li a { 
    float: left; 
    width: 5em; 
    color: #fff; 
    background-color: #036; 
    padding: .2em 1em; 
    text-decoration: none; 
    border-right: 1px solid #fff; 
} 

ul#navlist li a:hover { 
    background-color: #369; 
    color: #fff; 
} 

HTML:

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

Вопрос:

Если я удалить эту строку: float:left внутри ul#navlist, background-color: #036; будет не видно, почему?

Answer 1

Плавающий элемент удаляет его из нормального потока документа. Вот почему вы должны установить содержимое блока на родительский элемент или явно очистить поплавки:

/* All of the following will work: */ 

ul#navlist { 
    float: left; 
    /* problem: the element itself is removed from the document flow */ 
} 

ul#navlist { 
    overflow: hidden; 
    /* problem: dropdown lists will get truncated */ 
} 

ul:after { 
    content: ""; 
    display: block; 
    clear: both; 
    /* problem: compatibility with older browsers */ 
} 

Возможные другие решения не плавать li/a, но использовать display:inline-block вместо этого, что накладывает новую проблему пробелов между элементы появляются как «магический край».

Все эти методы работают с определенными ограничениями, вы должны выбрать тот, который вам больше всего подходит.

Answer 2

Используется для этого и удалитьfloat left;

ul#navlist:after{ 
     content:''; 
     overflow:hidden; 
     clear:both; 
     display:table; 

    } 
ul#navlist li { 
    display: inline-block; // add this line 
    vertical-align:top; // add this line 
} 

ul#navlist li a { 
    display:block; // add this line and remove float left 
    width: 5em; 
    color: #fff; 
    background-color: #036; 
    padding: .2em 1em; 
    text-decoration: none; 
    border-right: 1px solid #fff; 
} 

Demo