Очистка плавающего <li>правильно

Question

я имею дело с float: left; и CSS-reset Эриком Мейером с class="clearfix".Но есть один особый случай, мне интересно, как правильно очистить элемент floatd: в пределах <ul> ... </ul>.

Неправильная высота <ul> при использовании более понятного.Прояснитель должен быть в пределах <ul>.Давайте попробуем ...

Правильная высота, но HTML-код ist недействителен !

Как я могу очистить поплавок в <ul> с действующим кодом?

Спасибо, Йоханнес

Answer 1

Просто добавьте overflow: hidden к набору правил элемента ul. Ищите «очистка поплавков» в Google или Stack Overflow для других решений, хотя в этом случае это должно быть самым чистым.

jsfiddle demo: http://jsfiddle.net/9sxrN/1/

Answer 2

Используйте overflow:hidden; на ul

Answer 3

Как я понимаю, float можно применять к блок-элементам, которые нельзя вставить в UL. (ни div, ни BR вы не можете вставить в UL). На самом деле вы можете, но это недействительно.

Итак, я закрыл ваш ul контейнером div:

<div class="ul-container">
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<br style="clear:both">
</div>
<b>The height of the ul-tag is ok, but the code is not valid!</b>

и css ul a css .ul-container

.ul-container {
    border: 2px solid red;
}

ul li {
    float:left;
    background: #ccc;
    margin: 5px;
}