Разрушение div после float css

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

добавьте этот код после вашего ul:

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

Одним из решений является добавление стиля «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/

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

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

div#nav { overflow:auto; }

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

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

Без изменения вашего 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

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

#nav {
    float: left;
}

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

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

Ваша проблема в том, что вы перемещаете элементы <A>, но каждый из них находится внутри элемента <LI>. LI по умолчанию отображаются как блоки, поэтому каждый <LI> заставляет свой дочерний <A> начинать с новой строки.

Если вы запустите <LI>s, я думаю, вы решите свою проблему.

#nav #ulListNavi  li  {
    float: left;
}

Самым быстрым решением было бы добавить overflow: hidden, чтобы очистить float родительского элемента:

#nav{overflow:hidden;}