nexostudios

“Overflow:auto;” una solucion para el “float”

Como muchos saben y experimentan a diario cuando tenemos 2 bloques de contenido dentro de uno exterior Ej.:

<div class="content">
<div class="block-left">
</div>
<div class="block-right">
</div>
</div>

Lo que naturalmente se utiliza es para que queden un bloque flotado a la izquierda y el otro a la derecha se les agrega el estilo: float: left o float:right; según sea el caso.

El problema que esto nos trae es que el div que esta por afuera no se dibuja en los navegadores como tendría que hacerlo ya que como los bloques internos están flotados, el navegador supone que el contenido no tiene alto, un solución muy conocida es utilizar un div vacío con un style="clear:both" que soluciona a la perfección pero a la hora de un sitio complejo en el que se utilizan muchas cosas flotando se generan muchos divs vacíos tornando nuestro código en un poco confuso y entreverado.

Una buena solución a este problema es como dice el titulo usar el style="overflow:auto;" en el bloque que en este caso llamamos con una class="content" esto lo que hace es que el navegador independientemente de si los divs internos a este estén flotados o no toma el alto de estos para así dibujarse.

Una de las cosas a tener en cuenta es que si le agregamos un alto fijo al contenedor menor que el alto de los div internos esto nos generara una barra de scrool a la derecha.

Otro de los problemas es que si queremos sacar un div para afuera con un position: absolut; o algún tipo de estilo así también nos generara un scroll.