<ul> высота при содержании плавающего <li>

Question

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

<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;
}

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

Answer 1

Хорошие опции для содержания поплавков:

• Добавить overflow: hidden к ul.
• Использовать clearfix .

Answer 2

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

Answer 3

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

У плавающего слева всегда есть какая-то реакция, и ее нельзя использовать, если у нас есть альтернатива.1004 * Альтернатива:

li { display:inline-block; }

Нет необходимости добавлять дополнительный код, такой как float: left и overflow: hidden:)

Answer 4

проверьте это:

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

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