Hasta siempre, clear:both
A poco que se naveguen un par de horas por Internet, es fácil encontrar multitud de truquitos o hacks que nos pueden hacer la vida más sencilla, a la hora de trabajar con CSS. Eso es bueno, pero tambien lo es, pienso yo, tirar un poco del hilo y tratar de entender el porque de esos trocitos de código mágicos
La maquetación con CSS puede convertirse así en una mezcla de técnica, ciencia y arte.
Aún hay quien piensa que maquetar con tablas es más sencillo, pero seguro que no es tan divertido.
El problema
Cuando tratamos de maquetar nuestras páginas con CSS mediante elementos flotantes, no tarda en aparecer un elemento contenedor, que no rodea a los elementos contenidos, y esto resulta un verdadero incoveniente, ya que a menudo deseamos que los elementos con hijos flotantes, se comporten como dios manda y rodeen por completo a sus hijos.
Es decir, en lugar de un hermoso cuadro verde rodeando a nuestra capa roja tenemos esto:
-
#capa_verde{
-
border:solid #0F0;
-
margin-left:10px;
-
}
-
-
-
#capa_roja{
-
background-color:#F00;
-
width:100px;
-
height:100px;
-
float:left;
-
}
Cuando lo que queriamos ver es algo asi:
-
#capa_verde{
-
border:solid #0F0;
-
margin-left:10px;
-
}
-
-
-
#capa_roja{
-
background-color:#F00;
-
width:100px;
-
height:100px;
-
}
Por otra parte, este comportamiento, aunque fastidioso, es bastante lógico. Se debe a lo siguiente:
Cuando no se especifica un valor para el alto de un elemento, este se calcula a partir del alto de los hijos que contiene, además de los margenes y rellenos correspondientes. Pero cuando hacemos que un elemento sea flotante mediante la propiedad float, lo que hacemos realmente es sacarlo del flujo normal del documento, por lo tanto nuestro contenedor se queda sin elementos contenidos que le marquen el alto que debe tener.
Ummm, no. Asi explicado yo tampoco lo entiendo.
A ver si con unas fotos...
El paquete de tabaco es un elemento no-flotante que obliga a su contenedor (los cd's) a mantener un determinado alto. Si en lugar de un paquete de tabaco, tuviera que contener un libro seguro que los cd's estaria mas separdos, y si fuera una moneda estarian mas próximos. El alto del contenedor se adapta al alto del contenido.
Ahora bien, si convierto a mi paquete de tabaco en un elemento flotante, lo estoy elevando unos centímentros de mi lienzo, y al no tener nada que los mantenga separados, los cd's se dejan llevar por la gravedad.
Con el siguiente código podemos construir un pequeño ejemplo para ilustrar lo anterior.
el marcado:
el estilo:
-
body{
-
font-size:100%; /*necesario para el diseño elastico en ie*/
-
text-align:center;
-
}
-
#contenedor{
-
border:solid 1px blue;
-
text-align:left;
-
margin:auto;
-
width:46em;
-
}
-
-
#barra{
-
float:left;
-
width:10em;
-
outline:dashed 1px red;
-
margin:0.5em;
-
}
-
#cuerpo{
-
margin:0.5em;
-
width:33em;
-
float:right;
-
outline:dashed 1px green;
-
}
Esto es un claro ejemplo de una maquetación sencilla condos capas flotantes sin limpiar
Si no terminas de ver claro el uso de la propiedad outline no dejes de leer este otro articulo
La solución clásica
Tradicionalmente este problema se venía solucionando mediante el uso de la propiedad clear.
Así, si incorporamos el siguiente código a nuestro podemos obligar a crecer a nuestro contenedor.
-
.clear{
-
clear:both;
-
}
Esta técnica es poco elegante, ensucia nuestro marcado HTML con un elemento ajeno al contenido, e incluye un elemento "vacio" pero funciona, como puedes ver en este ejemplo
La solución definitiva
Pero no todo van a ser problemas, existe una solución alternativa como se presenta en este revelador artículo
La propiedad overflow permite controlar el desbordamiento de los elementos contenidos, y adminte cuatro valores, auto, visible, scroll y hidden.
El valor por defecto es visible, que hace la caja contenedora crezca para adaptarse al tamaño de sus hijos. El resto de valores mantienen las dimensiones especificadas con width y height, pero nos permiten controlar el comportamiento de las barras de desplazamiento, mostrandolas siempre (scroll), ocultandolas siempre (hidden) o mostrandolas solo cuando sea necesario (auto)
Pues resulta todos los valores posibles, menos visible asumen que se han especificado unas dimensiones, y si no es asi... obliga a que se calculen!!
Con overflow le recordamos a una caja que tiene hijos, flotantes, pero hijos.
Aqui os dejo el ejemplo definitivo
Problemas con Internet Explorer
No son demasiado graves, pero hay que tenerlos en cuenta.
Todo lo dicho con anterioridad funciona en IE, siempre y cuando fijemos un ancho para el elemento contenedor, no me pregunteis por que.
Además, si queremos que esta tecnica funcione en IE bajo Mac, deberemos asignar obligatoriamente overflow:hidden.
O eso parece, no he podido comprobar esto último ya que no tengo un Macintosh a mano, y si lo tuviera no instalaría Internet Explorer.
Comentarios
aCABO DE ENCONTRAR TU PAGINA Y TE FELICITO POR TUS ARTICULOS EN CUANTO A CSS Y HTML.
ESTAN MUY BUENOS ESO AUNADO ATUS GRAFICAS COMO ILUSTRACION .
eSTARE VISITANDO CONTINUAMENTE TU WEB PARA LEER TODO LO QUE PUBLIQUE REFERENTE A CSS,XHTML.
10 Septiembre 2006 Felipe Rguez
[…] Cuando desarrollamos alguna aplicación nos encontramos con problemas de capas que nos sobrepasan, incluso llegamos a añadir código “poco elegante” en nuestras creaciones,una buena solución al problema de superposición de capas, muy ilustrativo y explicativo, nos puede ayudar en muchas situaciones. […]
14 Septiembre 2006 clear:both, bye bye - aNieto2K
Deberias de probar especificando la propiedad float, en el contenedor, ya con eso se resuelven los problemas, ya que los elemento que se encuentran flotando, contienen a los que a todos aquellos que son su hijos y no importa que esten flotando siguen el flujo y asi todo solucionado
No se si me di a enteneder pues se me hacen un poco dificil de explicar pero dale el float al contenedor
14 Septiembre 2006 Rene
Muchas gracias Rene, por tu sugerencia.
Si algo tiene de bueno e interesante CSS es la gran cantidad de posibilidades que nos ofrece.
Investigaremos
14 Septiembre 2006 hari
¿Tuviste oportunidad de probarlo en IE7?
15 Septiembre 2006 Federico
Que va, aun no ha caido una beta de IE7 en mis manos. Ya me gustaría.
De cualquier forma, ahora mismo, mucho me equivoco o el grueso del mercado se lo reparten IE6 / Firefox.
Ojala IE7 solucione todos los problemas que tiene IE6, y si es así que se extienda muy muy rápido.
Pero creo que eso es mucho pedir, ¿tu que piensas?
15 Septiembre 2006 hari
Yo soy novata en esto del css, pero al mirar el código del ejemplo definitivo vi que te habías dejao el en el código y no lo entendia….pero ya me he enterao! Gracias
15 Septiembre 2006 Pequeña saltamontes
Vaya no ha salido…que te habías dejado el Clear
15 Septiembre 2006 Pequeña saltamontes
No hay de que, para eso estamos, pequeña saltamontes
Por cierto, tu blog engancha…
Gracias por comentar!!!
16 Septiembre 2006 hari
[…] el plan seldon — Hasta siempre, clear:both Solucion a las cajitas flotantes rebeldes, sin el feo clear: both (tags: css diseño HTML programming tips web web2.0 webdev) […]
20 Septiembre 2006 links for 2006-09-15 en newdisco
Hola a todos, me ha venido muy bien la explicación , pero al probarlo en mozilla, nada, no funciona, alguna sugerencia?
20 Diciembre 2006 lola
Siglink.14…
Una vez más, el listado de enlaces teóricamente semanales que nunca se sabe que día de la semana del año aparecerán™.
Aprovecho para comentar que los Siglinks como tales, desaparecen. Si el hombre es un animal de costumbres, yo lo debo de s…
23 Diciembre 2006 SigT
quiza les guste checar esto
http://www.csslab.cl/2006/07/20/flotando-en-la-incertidumbre/
3 Enero 2007 khafra
[…] Tutoriales y artículos: Tutorial de posicionamiento y layout en CSS || Cristalab Geekipollas » Solución a las Columnas en CSS Liquid layouts using CSS - the joy, the pain, the tears Progressive Layout | Web Design | PRO.HTML.IT A List Apart: Articles: In Search of the Holy Grail CollyLogic: Redesign Notes 1: Width-based layout Drop Column Layout | Muffin Research Labs Componer un diseño de 3 columnas en XHTML y CSS + Cristalab Learn CSS Positioning in Ten Steps CSSLab » Layout Fijo: resucitando los frames CSSLab » Layout fijo a elástico en sólo 4 caracteres Create a simple liquid layout - .net magazine A List Apart: Switchy McLayout: An Adaptive Layout Technique el plan seldon — Hasta siempre, clear:both EstadoBeta » Despejando Floats para IE7 « Anterior: Alojamiento gratuito de imágenes Siguiente: Centrar » […]
30 Enero 2007 Juglar : CSS Layouts - Agosto - 2005
Muy buena solución y muy ilustrativa la explicación. Gracias.
13 Febrero 2007 Mastropiero
A esto realmente no lo sabia, y eso que consideraba saber bastante sobre CSS.
Veo que lo tomaste de quirksmode, excelente sitio.
Gracias por tu aporte.
26 Febrero 2007 Lou
el ejemplo fotografico me encanto. muy novedoso
15 Marzo 2007 frank
Maravilloso, plas plas plas… una explicación de lo más reveladora… Gracias. Y outline… también… incrrei ble ble ble ble…
25 Abril 2007 Willfrom
Gracias!!
Muchísimas gracias. Estuve un par de horas solucionando un problemilla de posicionamiento, y leyendo esto lo resolví.
28 Abril 2007 Álex Acuña Viera
Es dificil explicarlo mejor. Gracias.
14 Mayo 2007 daigual
Muy buena la explicación, por cierto… ¿cuanto te ha aforado Ducados por hacer apología del tabaquismo?.
Saludos.
11 Junio 2007 yo
[…] [para profundizar un poco más en este tema…] […]
30 Septiembre 2007 Boozox » Solución a dos pesadillas del CSS
[…] La luz ha venido de un post viejo de El Plan Seldon, y básicamente consiste en modificar la cláusula overflow en el contenedor, para asignarle un valor diferente del que viene por defecto (visible), lo que obliga a calcular las dimensiones del mismo a partir de las de sus hijos flotantes. Por cierto, las fotos ilustrativas son fantásticas. […]
7 Enero 2008 Prod9 - CSS. Adiós al clear both
grasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssggrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssgrasiasssrasiasss
20 Enero 2008 grasiasss por la info :D
[…] Pero si el problema es que tenemos elementos “flotados”, y queremos que el contenedor los envuelva, nada más fácil que aplicar al contenedor la propiedad overflow: hidden. La explicación la encontraréis aquí […]
17 Febrero 2008 Boozox » Trucos para hacer diseños en CSS más rápido y mejor
Gracias por tu artículo. Me estaba volviendo loco modificando un tema para Drupal. Con tu artículo ya he superado mi bloqueo ;-)
¡Gracias!
Por cierto, muy útil y divertido el ejemplo de los cds y el tabaco :-D
15 Marzo 2008 Sandor Inopia
Hola,
Soy nuevo en esto y ando un poco perdido la verdad. Tengo una pregunta, yo tengo 2 div que contienen 1 imagen cada uno. ¿Cómo puedo hacer para que uno esté al lado del otro?
Los 2 div no pueden estar englobados dentro de un div común y por ello me he creado una clase css donde le indico float:left pero no me funciona.
Gracias por la ayuda.
25 Marzo 2008 Parleño