Cancellazione corretta di un con virgola mobile

Question

Mi occupo quotidianamente di float: left; e del ripristino CSS di Eric Meyer con class="clearfix".Ma c'è un caso speciale, mi chiedo come cancellare correttamente un elemento floatd: all'interno di <ul> ... </ul>.

Altezza errata del <ul> anche se si utilizza un clearer.Il più chiaro dovrebbe essere all'interno del <ul>.Proviamo ...

Correggi l'altezza, ma il codice HTML è non valido !

<” Come posso cancellare il float all'interno del <ul> con un codice valido?

Grazie, Johannes

Answer 1

Aggiungi semplicemente overflow: hidden al set di regole dell'elemento ul.Cerca "clearing floats" su Google o Stack Overflow per altre soluzioni, anche se in questo caso dovrebbe essere la più pulita.

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

Answer 2

Da quanto ho capito, float può essere applicato a elementi di blocco, che non possono essere inseriti in UL.(né div, né BR che non puoi inserire in UL).In effetti puoi, ma non è valido.

Quindi, ho coperto il tuo ul con il contenitore 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>

e css di ul un css di .ul-container

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

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

Answer 3

Utilizza overflow:hidden; su ul