Como limpiar Floats en CSS

Quien no ha experimentado problemas al iniciar con css y se encuentra con algo como esto:

explain

Pero, qué pasa con el contenedor, si ambos objetos, tanto el contenido general como el contenido del sidebar están dentro del contenedor?

Pues para este problema es cuando nos referimos a limpiar floats, ya que tanto contenido general como  contenido del sidebar tienen propiedad float y debemos hacer un clear. Aquí te mostramos 3 posibles soluciones:

Método 1: colocar un elemento justo antes de cerrar el contenedor (solución “clásica”)

clasicClear

Esta es una solución clásica, o una de las primeras soluciones, consiste en colocar algún elemento, ya sea un <div> o un <br> por ejemplo, con un clear:both:

HTML:

<div id="contenedor">

 <section class="left">
 <h3>Contenido General</h3>
 </section>

 <aside class="right">
 <h3>Contenido Sidebar</h3>
 </aside>

 </div>

CSS:

#contenedor{
 border: 2px solid #CFC4BA;
 color: white;
 display: block;
 font-size: 13px;
 margin:0 auto;
 padding: 5px;
 width: 600px;
 margin-top: 10px;
 }
 #contenedor .left{
 background: #9ED233;
 display: block;
 float: left;
 text-align: center;
 width: 69%;
 }
 #contenedor .right{
 background: #5EACC6;
 display: block;
 float: right;
 text-align: center;
 width: 30%;
 }
 .limpiar{
 clear: both;
 content: "";
 display: block;
 }

Método 2: Overflow Hidden

Captura de pantalla 2014-04-22 a las 23.44.05

Overflow hidden en el contenedor es una mejor solución, no tenemos que crear un div o elemento para limpiar floats, esto se debe a que overflow recalcula el contenido de la caja y nos da una alternativa de limpiar los float.

DESVENTAJA: la única desventaja es que si tenemos algun elemento detro de ·contenedor con posicion absoluta, de manera que se salga del contenedor, se va a cortar la información, ya que overflow hidden actua como si fuese una mascara de la información.

HTML:

<div id="contenedor">

 <section class="left">
 <h3>Contenido General</h3>
 </section>

 <aside class="right">
 <h3>Contenido Sidebar</h3>
 </aside>

 </div>

CSS:

#contenedor{
 overflow:hidden;
 border: 2px solid #CFC4BA;
 color: white;
 display: block;
 font-size: 13px;
 margin:0 auto;
 padding: 5px;
 width: 600px;
 margin-top: 10px;
 }
 #contenedor .left{
 background: #9ED233;
 display: block;
 float: left;
 text-align: center;
 width: 69%;
 }
 #contenedor .right{
 background: #5EACC6;
 display: block;
 float: right;
 text-align: center;
 width: 30%;
 }

Método 3: Clear con pseudoclases (para mi la mejor)

pseudo

Una pseudoclase, en este caso :after o : before actua como si crearamos un elemento pero por css. Es decir no lo vamos a ver en el html, pero CSS si lo va ainterpretar como otro elemento.

En la grafica anterior tenemos el div contendor. Dependiendo de la pseudoclase que usemos nos creara un elemento antes o despues del contenido.

En este caso necesitamos crearlo despues del contenido, justo antes de cerrar el div del #contenedor

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

Aca le decimos a ese objeto creado que tenga un contenido vacio (content:””) y claro esta un clear:both. y ya esta!, puedes ver el funcionamiento en este ejemplo:

#contenedor{
 border: 2px solid #CFC4BA;
 color: white;
 display: block;
 font-size: 13px;
 margin:0 auto;
 padding: 5px;
 width: 600px;
 margin-top: 10px;
 }
 #contenedor .left{
 background: #9ED233;
 display: block;
 float: left;
 text-align: center;
 width: 69%;
 }
 #contenedor .right{
 background: #5EACC6;
 display: block;
 float: right;
 text-align: center;
 width: 30%;
 }
 #contenedor:after{
 clear: both;
 content: "";
 display: block;
 }
 <div id="contenedor">

 <section class="left">
 <h3>Contenido General</h3>
 </section>

 <aside class="right">
 <h3>Contenido Sidebar</h3>
 </aside>

 </div>

DEMO

You may also like...