En realidad es lo mismo.
Código CSS:
Ver original.clearfix:after {
content: '.';
visibility: hidden;
clear: both;
}
.foo{
float: left;
}
Pero tu habías puesto un before y after a la vez, bastaba con el .clearfix:after, esto hace que
se convierta en
Código HTML:
Ver original <div class="foo">lorem ipsum dolor
</div> <div class="foo">lorem ipsum dolor
</div> <div style="visibililty: hidden; clear: both;">.
</div>
Verifica esto:
Código CSS:
Ver original.cont{
border: 2px solid #000;
left:50px; /* No aplica sin relative*/
top:50px; /* No aplica sin relative */
padding: 10px;
}
.cont1{
border: 2px solid #000;
background:#090;
position:relative; /* ??? */
float:left;
}
.cont2{
border: 2px solid #000;
background:#00C;
position:relative; /* Hace que mantenga su espacio en el contenedor */
float:left; /* flotante a la izquierda */
left:10px; /* posición? pero si ya era flotante? */
top:30px; /* otra posición, left y top son el problema */
}