Si ya llevas un tiempo curtido en CSS seguramente te suene este escenario clásico de la maquetación usando floats. Si eres novato y has llegado a este post buscando una solución, no te preocupes, en este post la encontrarás.
El escenario es este: tienes un elemento de contenedor y dentro de él (o varios) junto a contenido que no está flotado, y el elemento flotado desborda al contenedor. ¿Te suena, verdad?
O sea, esto:
<div class="contenedor ejemplo1">
<img src="logo-campusMVP.png" alt="logo campusMVP"/>
<p>Aquí tenemos un <p> con texto.</p>
</div>
.contenedor {
margin:2em auto 3em;
padding:0.5em;
width:350px;
border:2px solid #f90;
}
img {
float:left;
margin: 0 0.5em 0 0;
}
p {
margin:0.2em 0;
}
Al estar flotada la imagen, el elemento padre no "crece" y la imagen lo desborda porque está fuera del flujo del documento. En la práctica es como si verticalmente no existiese.
Soluciones habituales
La más rápida y sencilla de arreglar esto es ponerle un humilde overflow:hidden; que, aunque en algunos casos puede generar problemas con elementos posicionados de manera absoluta, en la inmensa mayoría de los casos te bastará con eso. En realidad también funciona con los valores scroll y auto, pero usando hidden sabes que nunca te saldrán barras de scroll.
<div class="contenedor ejemplo2">
<img src="logo-campusMVP.png" alt="logo campusMVP"/>
<p>Aquí tenemos un <p> con texto.</p>
</div>
.ejemplo2 {
overflow:hidden;
}
Otra opción, es, básicamente, limpiar el flujo del documento, reiniciarlo. Para ello limpiamos los floats metiendo un elemento con clear:both al final del contenido (un <br> por ejemplo), o mucho más elegante y mejor, poniéndole clear:both al pseudoelemento :after del contenedor. A esta solución se le conoce como Clearfix Hack.
<div class="contenedor ejemplo3 clearfix">
<img src="logo-campusMVP.png" alt="logo campusMVP"/>
<p>Aquí tenemos un <p> con texto.</p>
</div>
.clearfix:after {
content:"";
display:block;
clear:both;
}
Y el resultado es el mismo:
Hay más soluciones que estas dos (mejores o peores, va por gustos, y con diferentes variantes) pero para no liarnos he elegido estas dos porque son mis favoritas y, a mi juicio, son las más populares.
Peek-a-Boo: la madre de todos los bugs de IE
Quizá sea un poco offtopic, pero si eres más bien jovenzuelo o entraste en el mundo de la maquetación tableless con un soporte de CSS más o menos decente, quizá no hayas conocido el momento álgido de esta composición de HTML y CSS: El Pekaboo-Bug de IE6.
Cuando tenías un elemento flotado junto a contenido no flotado en un contenedor (que tampoco estuviera flotado) como este:
(Fíjate que, como comentamos antes, hay un div al final que hace el clear:both;)
Pues en IE6 a veces (muchas) pasaba esto:
Voilà! El contenido desaparecía. Hacías scroll, cambiabas de ventana, o le pasabas el ratón por encima y se veía. A veces sí, a veces no. De ahí su nombre, ya que Peek-a-Boo es el nombre del juego Cucú-Tras en inglés (el juego de los niños pequeños de taparse la cara con las manos para "esconderse").
El desencadenante era el div que hacía el clear:both; al tocar la imagen. Lo mejor es que una de las soluciones más populares a este bug se llamaba The Holly-Hack (el Santo Hack), y consistía en darle un 1% de altura al contenedor. No había web en la que no tuvieras que usarlo. Pero esta es otra historia y quizá será mejor contarla en otra ocasión.
Usando flow-root para display
Volviendo a lo nuestro, que es simplemente limpiar los floats; lo interesante es que existe un valor para la propiedad display que nos va a simplificar la vida. Se llama flow-root. En el borrador actual de la especificación de CSS para el nivel 3 del módulo Display (CSS Display Module Level 3) se puede leer, literalmente:
The element generates a block container box, and lays out its contents using flow layout. It always establishes a new block formatting context for its contents.
Que traducido viene a ser algo más o menos así:
El elemento genera una caja contenedora de bloque, y dispone sus contenidos siguiendo el flujo. Siempre establece un nuevo contexto de disposición de los bloques para sus contenidos.
Quédate con la segunda frase, concretamente la parte que dice "siempre establece un nuevo contexto". En la práctica es como hacerle un clearfix, vamos, limpiar el flujo del documento de una manera más sencilla y elegante, pero el elemento sigue siendo de bloque. Es como si tuviese un display:block. A mí, personalmente, esta solución me gusta mucho.
<div class="contenedor ejemplo4">
<img src="logo-campusMVP.png" alt="logo campusMVP"/>
<p>Aquí tenemos un <p> con texto.</p>
</div>
.ejemplo4 {
display:flow-root;
}
Actualización Dic 2019: En la actualidad lo implementan todos los principales navegadores: Firefox, Chrome (y todos los basados en él, como Brave, Edge,Opera...) y Safari. Y dentro de los navegadores móviles, el único que va por detrás es Safari para iOS. Así que se puede utilizar con bastante confianza.
Descárgate el ejemplo
Puedes descargarte los ejemplos de este post para verlos todos juntos en un navegador. Recuerda que el último ejemplo no lo verás bien en un navegador actual.
¿Qué te parece este valor de display? Déjanos tus impresiones en los comentarios.
Fecha de publicación: