<ul> height при использовании плавающего <li>

У меня есть список:

<ul>
 <li>Number 1</li>
 <li>Number 2</li>
 <li>Number 3</li>
 ...
</ul>

Все <li> являются плавающими. Мне нужна высота окна <ul>. Если я правильно помню это недействительно:

<ul>
 <li>Number 1</li>
 <li>Number 2</li>
 <li>Number 3</li>
 ...
 <hr class="clear" />
</ul>

.clear {
   clear: both;
}

Как я могу это сделать? Количество элементов в списке может быть различным, поэтому я не могу использовать фиксированную высоту.

Ответ 1

Хорошие параметры для размещения поплавков:

Добавьте overflow: hidden в ul.
Используйте clearfix.

Ответ 2

Это не прямой ответ на ваш вопрос, но в качестве альтернативы вы можете использовать display:inline-block? В эти дни я просто использую это вместо float, где это возможно, так как по большей части большую часть времени он может достичь той же цели, без полной сложности с контейнерами, которые содержат внутренние плавающие элементы, и все время clear,

Ответ 3

проверить его:

ul { overflow: hidden; }
li { float:right; display:block; }

добавьте класс к вашим элементам, не делайте этого для всех элементов.

Ответ 4

Вот, я представляю, один из самых простых способов справиться с такими ситуациями.

Поплавок слева всегда имеет определенную реакцию и не подходит для использования, если у нас есть какая-то альтернатива.

Альтернатива:

li { display:inline-block; }

Не нужно добавлять дополнительный код наподобие float: left и overflow: hidden:)