clearfix ultimate
Muchas han sido las veces que he nombrado y recontra-aplicado el método de .clearfix aquí en CSSLab. Lo suelo nombrar a menudo en clases, ya que es el método más fácil de entender y sobrellevar el colapso de cajas contenedoras de ventanas flotantes. Fácil porque basta con aplicar una class="clearfix" y nuestra caja vuelve a comportarse como debería. Pero es código extra que quizás ensucie nuestra hoja de estilos, y andar agregando class‘es que no tienen sentido semántico puede que no agrade a los más puristas. Pero existe desde hace mucho tiempo otra solución al mismo problema.
Ya lo mencioné de rebote en un artículo. Este método no tiene nombre conocido (por lo menos en los sitios que he leído no lo nombran de alguna manera especial). Es tan simple que dan ganas de tirarse por la ventana por no conocerlo antes.
Se trata de utilizar la propiedad CSS overflow en la caja que está colapsando. Eso es todo. Basta con incluirla en algún de los siguientes valores:
- overflow: auto;
- overflow: hidden;
- overflow: scroll;
Y la caja volverá a comportarse como debiera: envolviendo a los elementos flotantes dentro de ella. La teoría es simple: como el valor por defecto es overflow: visible, esto hace que la caja crezca para adaptarse al tamaño que tienen sus elementos (etiquetas) hijo. Con visible se asume que se han dado los valores de ancho (width) y alto (height) y por eso nada sucede; ya con los demás valores ya nombrados, obliga a la caja contenedora a re-calcular sus dimensiones, tomando en cuenta ahora a los elementos hijos que están con float. Con alguno de estos valores de overflow, le recordamos a la caja contenedora que tienen elementos hijo (flotando) y que debe conocer sus tamaños para envolverlos.
El ejemplo más clásico a continuación. El HTML:
<div id="contenedor">
<div class="flotando_izquierda">
<p>Floto hacia la izquierda</p>
</div>
<div class="flotando_derecha">
<p>Floto hacia la derecha</p>
</div>
</div>Y el CSS:
#contenedor {
overflow: auto;
height: 1%;
}
.flotando_izquierda {
float: left;
}
.flotando_derecha {
float: right;
}
Para que IE6 reconociera este método, hubo que aplicar a la caja contenedora (en este caso #contenedor) height: 1%, haciendo que todos los browsers modernos desplieguen de igual manera este método.
El único detalle que le encontré fue al momento de utilizar dentro de #contenedor un elemento posicionado absolutamente, relativo a él, lo que hace que se muestre la barra de scroll (dado el overlow: auto;). En ese caso, lo mejor es utilizar overflow: hidden, lo que hace a la caja esconder al elemento absoluto, en el caso de éste ser más grande que la caja misma.
Este caso es bastante específico, y creo que no hace que este método deje de ser una muy buena alternativa de despeje.
Links:
Sobre el Autor: Jorge Epuñan
Soy quien escribe en este sitio: diseñador gráfico de profesión, desarrollador web por preferencia y amante de la interacción humano-computador. Cuando no pienso en web, salgo a trotar por mis barrios en Santiago, Chile o me junto con amigos a un bar a conversar sobre nuevas tendencias y tecnologías. Twitter profesional y personal, además del Contacto.
Evelio
09 / Junio / 2008
fearlex
09 / Junio / 2008
Carlos Leopoldo
10 / Junio / 2008
ViB
10 / Junio / 2008
Claudio Olivares
10 / Junio / 2008
Jorge Epuñan
10 / Junio / 2008
Claudio Olivares
10 / Junio / 2008
andres
10 / Junio / 2008
Coto
12 / Junio / 2008
Javier Martinez
12 / Junio / 2008
manuedit
12 / Septiembre / 2008
gnzlo
26 / Marzo / 2009