Разрыв div после float css

У меня есть div, называемый NAV, и внутри NAV. У меня есть UL с 5 li, который я плаваю влево, а li, но когда я делаю это, NAV рушится. Я знаю это, потому что я помещал границу вокруг NAV, чтобы увидеть, рушится ли она, и это происходит. Вот пример.

свернуто http://img401.imageshack.us/img401/8867/collapsedze4.png

не снесено http://img71.imageshack.us/img71/879/nocollapsedkx7.png

как вы можете видеть на первом изображении, ссылки в div NAV перемещаются влево и черная граница ontop - это фактический div, называемый NAV.

на этом изображении вы можете увидеть, как у него верхняя и нижняя границы, и он не рухнул.

Вот некоторые из html и css, которые я использовал.

alt text http://img301.imageshack.us/img301/5514/codejc8.png

#nav #ulListNavi  a  {
    float: left;
}

Ответы

Ответ 1

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

div#nav { overflow:auto; }

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

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

Ответ 2

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

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

Ответ 3

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

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

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

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

Ответ 4

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

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

Ответ 5

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

Ответ 6

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

#nav {
    float: left;
}

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

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

Ответ 7

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

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

#nav #ulListNavi  li  {
    float: left;
}

Ответ 8

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

#nav{overflow:hidden;}

Ответ 9

Без изменения 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