Effacer un Flotté correctement

Question

Je dialyse avec float: left; et le CSS-Réinitialisation par Eric Meyer avec class="clearfix". Mais il y a un cas spécial, je me demande comment effacer correctement un élément flottant: à l'intérieur <ul> ... </ul>.

Mauvaise hauteur du <ul> bien que l'utilisation d'un plus claire. Le plus clair doit être dans le <ul>. Essayons ...

Hauteur correcte, mais le HTML-Code IST pas valide!

Comment puis-je effacer le flotteur dans le <ul> avec du code valide?

Merci, Johannes

Answer 1

Ajouter simplement overflow: hidden au ul ensemble de règles de l'élément. Recherchez des «flotteurs de compensation» sur Google ou Stack Overflow pour d'autres solutions, mais dans ce cas, cela devrait être le plus propre.

Démo jsfiddle: http://jsfiddle.net/9sxrn/1/

Answer 2

Si je comprends bien, Float peut être appliqué aux éléments de blocs, qui ne peuvent pas être insérés dans UL. (Ni div, ni BR que vous ne pouvez pas insérer dans UL). En fait, vous le pouvez, mais ce n'est pas valable.

Alors, j'ai couvert votre UL de conteneur 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>

et css de ul a fait css de .ul-container

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

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

Answer 3

Utilisation overflow:hidden; sur le ul