[Shaci]

<style type="text/css">
#wrap, #content, ul, ul li {
    overflow: hidden;
    position: relative;
}

#wrap {
    background: gray; 
    width: 208px;
    height: auto;
}

#content {
    background: red;
    margin: 20px auto;
    width: 100px;
    height: 50px;
}

ul, ul li {
    margin: 0px;
    padding: 0px;
}

ul {
    width: 208px;
    height: 20px;
}

ul li {
    background: #35C;
    border: solid 1px;
    border-color: #46F #238 #238 #46F;
    display: block;
    list-style: none; 
    text-align: center;
    float: left;
    width: 50px;
}

ul li a {
    color: #fff;
    font: 300 14px/14px arial, tahoma, verdana, sans-serif;
    text-decoration: none;
}
</style>

вот здесь вопрос возник:
есть такие статейки по верстке (хорошие):
http://softwaremaniacs.org/blog/2005...-layout-float/
там есть цитата:

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

и решение:

Для устранения подтягивания блоков существует специальное свойство — clear. Оно заставляет элемент сдвигаться вниз, пока сбоку от него не останется float'ов.
Но это не решает другой проблемы: того, что float'ы проваливаются через "main", и тот схлопывается, в результате чего не видно колоночного фона, который ему назначен. Проваливание можно победить двумя способами.

Можно явно спозиционировать контейнер каким-нибудь образом. Насколько я понимаю логику спецификации, поведение проваливания считается логичным только в простом потоке. В других случаях оно только мешает. И так оно и есть, как мы убедились. То есть достаточно назначить контейнеру например position:absolute или float:left и ничего не будет проваливается, контейнер будет полностью заключать в себя и текст, и float'ы. В нашем случае (и в большинстве случаев, кстати) это решение вполне подойдет.

Другой интересный способ связан с побочным эффектом свойства overflow.
Так вот побочный эффект заключается в том, что если контейнеру поставить любой overflow, кроме обычного visible, он вдруг растягивается и заключает в себя float'ы, которые в нем сидят, устраняя проваливание.

так вот,
у нас есть контейнер ul, унего в стилях position:relative и
overflow:hidden,
если я удаляю эти стили ему, то floatнутые блочные li (у которых по умолчанию высота чуть больше высоты ul) "заканчиваются" чуть-чуть ниже ulа(через файрбаг посмотрел, на полосочку маленькую ниже), т.е. "проваливаются через низ контейнера"

если ставим position:relative и overflow:hidden
то, как я понимаю, благодаря поцизионированию ul, решается проблема "проваливания", а overflow уже просто обрубает то, что выходит за пределы контейнера

но если мы ставим просто overflow:hidden без position:relative, то контейнер, по идее, должен растянуться, и заключить в себя floatы,
а вместо этого он обрубает лишнее у floatов

и если мы отдельно ставим position:relative, то тоже самое, по идее мы позиционируем контейнер => "проваливание" должно исчезнуть, но опять получается, что ul чуть чуть уже, чем li.