Borrar un <li> flotante correctamente
-
29-10-2019 - |
Pregunta
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 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
Solución
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/
Otros consejos
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;
}
Usar overflow:hidden;
sobre el ul