Twitter Facebook Google + RSS Feed

Conoce Flow Root la solución al desborde de un elemento con Float

0
CSS3Diseño

lunes, 21 de mayo de 2018 a las 10:10hs por Valentina Echezuria

Seguramente a muchos maquetadores les ha sucedido alguna vez el desborde de algún elemento que posea float (ya sea a la izquierda o derecha ) dentro de algún contenedor, que genera un error en la visualización del elemento ya que pareciera que no ocupara espacio dentro del contenedor.

Por esa razón te presentamos Flow Root una de las soluciones a este inconveniente.

Por ejemplo:


<div class="contenedor">
    <img src="doctor-single.jpg" alt="imagen-ejemplo"/>
    <p>Algún texto increíble <p> de ejemplo</p>
</div>

contenedor {
   margin:2em auto 3em;
   padding:0.5em;
   width:350px;
   border:1px solid #e0e0e0;
}

img {
   float:left;
   margin: 0 0.5em 0 0;
   width: 100px
}

p {
   margin:0.2em 0;
}

Resultado

Utilizar flow-root

Esta propiedad funcionara de manera muy parecida si utilizáramos clearfix, es decir, una limpieza del flujo del documento, pero este elemento seguiría siendo un bloque, como si tuviera una propiedad display;block.

.contenedor {
    margin:2em auto 3em;
    padding:0.5em;
    width:350px;
    border:1px solid #e0e0e0;
    display:flow-root;
}

Resultado

De esta manera obtendremos una correcta visualización de el contenido con float.

Soporte

  • Google Chrome y Firefox tienen soporte de este estilo.
  • Microsoft Edge y IE aun no lo han implementado.

Otras posibles soluciones

Utilizar flow root no es la única manera de solucionar este inconveniente, algunas de estas opciones son:

Una forma seria agregar al contenedor un Overflow:hidden, esta opción nos podría traer inconvenientes con elementos con posición absoluta, pero en otras instancias si funcionaria para solventar el desborde.

.contenedor {
    margin:2em auto 3em;
    padding:0.5em;
    width:350px;
    border:1px solid #e0e0e0;
    overflow:hidden;
}

Otra forma es utilizar clearfix, una limpieza del flujo del documento añadiendo al pseudoelemento ::after del contenedor un clear:both y display:block y de esta manera también solucionaríamos este desborde.

.contenedor::after {
    clear: both;
    content: "";
    display:block;
}

0 comentarios »

Deja un comentario

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

Buscar