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;
}