Коллапс отделения после CSS плавающей

Одно решение состоит в том, чтобы добавить стиль "clear:both" к элементу после последней пущенной в ход привязки, например:

<div id="nav">
  <ul id="ulListNavi">
    <li><a href="#">Home</a></li>
    <li><a href="#">Search</a></li>
    <li><a href="#">Flowers</a></li>
    <li><a href="#">My Account</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
  <div style="clear:both;"></div>
</div>

Это заставляет содержание элемента очищать все плавающие элементы прежде, чем закрыть содержание поля.

Несколько других опций для очистки плаваний здесь:

http://www.quirksmode.org/css/clearing.html

http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/

относительно лучшего способа сделать его, это - почти священная война, пуристы взбесились бы о дополнительном отделении, если Вы не будете суетиться небольшой дополнительной разметкой, то добавление очищенного отделения, как предложил Joshua и AJ будет хорошо работать и является надежной техникой, но существует по крайней мере 17 других способов сделать его...

добавьте этот код после своей ул.:

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

Попытайтесь пустить в ход содержание элемента налево также.

Добавьте любое значение переполнения , кроме visible , в ваш контейнер:

div#nav { overflow:auto; }

Затем добавьте width , чтобы восстановить ширину

div#nav { width: 100%; overflow:auto; }

Не беспокойтесь об очистке элементов или переполнении. Добавьте это:

#nav {
    float: left;
}

Когда вы размещаете LI, #nav больше ничего не "содержит", поэтому он сворачивается. Но если #nav также является плавающим, он содержит все, что находится внутри него, поэтому он снова расширяется.

(Также рассмотрите возможность удаления div #nav и просто применения тех же стилей к UL.)

Без изменения вашего HTML:

#nav
{
    width: 100%;
    overflow: auto;
    border: solid 1px red;
}
#ulListNavi
{
    margin: 0;
    padding: 0;
    list-style: none;
}
#nav #ulListNavi li
{
    float: left;
}
#nav #ulListNavi li a
{
    margin-left: 5px;
}

Работает в IE8 и FF 3.5