limpiando los float

Tecnica de flotado para que la altura (height) de la capa contenedora de los elementos flotados crezca segun el contenido de sus hijos y al mismo tiempo evitar problemas de visualización.

by cristian_cena

HTML

<div id="contenedor">
    <div class="columnas" id="col_1"> ... contenido de la columna 1 ... </div>
    <div class="columnas" id="col_2"> ... contenido de la columna 2 ... </div>
</div>

<br/><br/> <!-- unos saltos de línea solo para que se note el ejemplo-->

<div id="sinlimpiar">
    <div class="columnas" id="col_1"> ... contenido de la columna 1 ... </div>
    <div class="columnas" id="col_2"> ... contenido de la columna 2 ... </div>
</div>

CSS

#contenedor{
    width:360px;
    outline:2px solid black;
    overflow:hidden; /*solo con esta línea basta para limpiar los float*/
}
#sinlimpiar{
    width:360px;
    outline:2px solid black;
    /*
    observemos el comportamiento:
    la altura de #sinlimpiar es igual a cero 
    pues no crece segun el contenido de sus hijos.  
    */
}
.columnas{
    width:146px;
    border:2px solid red;
    margin:10px;
    padding:5px;
    float:left;
}
#col_1{background:#FFCC35;}
#col_2{background:#E8570C;}

JavaScript

/*
lectura obligatoria:
http://librosweb.es/css_avanzado/capitulo1/limpiar_floats.html

TIP: 
El ancho máximo de una caja css está dado por la suma de:
width+margin+padding+border (y no solo por width)
En caso de que la suma de los anchos totales de las columnas superen al width de su contenedor las mismas no caberán y las columnas que no quepan pasarán a la línea inmediatamente posterior.

width de el contenedor = 360px
Entonces si tenemos dos columnas debemos hacer este cálculo:
360/2 = 180
180-20(margin-left y margin right) = 160
160 - 10 (padding-left y padding-right) = 150
150 - 4 (border-left y border-right) = 154
width de la columna = 154px
*/