Borrar un <li> flotante correctamente

Question

trato diariamente con float: left; y el restablecimiento de CSS de Eric Meyer con class="clearfix".Pero hay un caso especial, me pregunto cómo borrar correctamente un elemento flotante:Dentro <ul> ... </ul>.

Altura incorrecta del <ul> aunque usando un más claro.Cuanto más claro debe estar dentro del <ul>.Intentemos ...

Altura correcta, pero el código HTML no. no es válido!

¿Cómo puedo limpiar el flotador dentro del <ul> con codigo valido?

Gracias johannes

Answer 1

Simplemente agregue overflow: hidden hacia ul conjunto de reglas del elemento.Busque 'borrar flotadores' en Google o Stack Overflow para encontrar otras soluciones, aunque en este caso esta debería ser la más limpia.

demostración de jsfiddle: http://jsfiddle.net/9sxrN/1/

Answer 2

Según tengo entendido, float se puede aplicar a elementos de bloque que no se pueden insertar en UL.(ni div, ni BR no puedes insertar en UL).De hecho puedes, pero no es válido.

Entonces, cubrí tu ul con un contenedor 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>

y css de ul a css hecho de .ul-container

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

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

Answer 3

Usar overflow:hidden; sobre el ul