display: flow-root

Parece que pronto tendremos disponible display: flow-root. Tanto Chrome Canary como Firefox Nightlies lo soportan ya.

Va a ser muy útil ya que nos vamos a quitar de encima el engorro de usar clearfix y soluciones parecidas cuando un elemento contenedor tiene en su interior otro elemento con “float” siendo la altura de este elemento mayor que el otro contenido dentro del contenedor. Gráficamente lo que nos sucede es esto:

El contenedor sólo cubre el texto y se queda fuera parte del elemento con el “float”, molestando a lo que viene a continuación del contenedor.

Este es un problema muy antiguo por lo que seguro que sabéis a qué me refiero.

Pues bien, utilizando display: flow-root este problema se acaba.

Parece que hay aún algo de debate sobre el nombre utilizado. Veremos en que acaba todo…

Más información: https://www.rachelandrew.co.uk/archives/2017/01/24/the-end-of-the-clearfix-hack/

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.