Descubre flow-root, el nuevo valor de display para limpiar floats en CSS
Menú de navegaciónMenú
Categorías

La mejor forma de Aprender Programación online y en español www.campusmvp.es

Descubre flow-root, el nuevo valor de display para limpiar floats en CSS

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 (en el momento de escribir este post) viene en camino un nuevo 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;
        }

Para probar este nuevo valor, de momento solo puedes hacerlo en Google Canary y en Firefox Nightlies, que son las versiones para desarrolladores.

Edge tampoco lo tiene implementado aún, así que si quieres que Microsoft lo incorpore cuanto antes a Edge, te animo a votar desde esta página.

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 nuevo valor de display? Déjanos tus impresiones en los comentarios.

Pablo Iglesias Pablo Iglesias es diseñador y responsable de Marketing en campusMVP. Cuenta la leyenda que, anidando listas HTML en busca de la página semánticamente perfecta, provocó un agujero espacio-temporal en IE tan grande, que en Redmond tuvieron que llamar al comando SG1 de Stargate para evitar una invasión alienígena. Puedes seguirlo en twitter ( @piglesias). Ver todos los posts de Pablo Iglesias

No te pierdas ningún post

Únete gratis a nuestro canal en Telegram y te avisaremos en el momento en el que publiquemos uno nuevo.

Archivado en: Desarrollo Web

Comentarios (1) -

Me parece genial, era hora de que se comience a implementar soluciones estandar a situaciones cotideanas a la hora de solucionar resultados visuales inesperados, espero que salga muchas cosas mas :D genial la publicacion! Me encanta leer la historia de la vieja escuela.

Responder

Agregar comentario