CSS: Solución a contenedor que pierde el height al flotar el contenido
7 seguidores
Cuando tenemos un bloque contenedor y flotamos los elementos que éste contiene, pierde el height. Algo como esto:
Yo esto lo soluciono dándole un height 'auto' y overflow 'hidden':
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
.container {
position: relative
width: 320px;
height: auto;
overflow: hidden;
}
.container > div {
width:70px;
height:70px;
background-color:#333;
float:left;
}
También se puede usar overflow 'visible' y en un principio funciona en todos los navegadores.
jonitjuego
hola,
Muy útil el post, gracias!
davidoliveras
Yo también soy partidario de utilizar el overflow!
ismael_gonzalez
Yo sigo en mis 13 y la class clearfix es la mas escalable, sencilla de aplicar, y limpia a nivel de css.
Muchos bugs de IE vienen dados por sobreflotar elementos, aplicar demasiados overlfows y cosas de este tipo.
Usando esta clase te aseguro que te ahorras dolores de cabezas con paddings( aplicando el width 100%), con overfloats ( raros en IE al flotar anidadmente demasiados elementos), y el overflow visible que comentar psycho no lo he probado nunca, pero estas declarando cosas que por defecto ya se aplican a los elementos.
Por el tema del :after y que meta un punto, eso no es indexable ya que no pertenece al contenido de HTML, es presentación como buen CSS que es.
A todo esto esta clase se aplica directamente a un elemento, no asignando esas propiedades a otras clases, que eso si es sucio, por ejemplo:
<ul class="nav clearfix">
...
</ul>
Pero bueno como bien dice psycho cada maestro con su librillo.
markshock
+1 a la solución de e-lena es la que suelo usar yo también. No me gusta usar los :after ...
psycho
Cada maestrillo con su librillo, a mi me ha gustado lo que ha dicho e-lena, porque si el contenedor está flotado no hace falta declarar el overflow.
Isma, con overflow:visible también funciona casi siempre.
e_lena
De hecho creo que es peor a nivel de semántica ser intrusivo con el contenido, y meter elementos que no hacen falta como el punto ¿no?
Usuario desconocido
¿Clearfix de verdad te parece una buena solución?
¿Meter con el :after un . al final del todo? A mi me parece una solución muy muy sucia y anticuada.
ismael_gonzalez
La mejor opcion es acostumbrarse a usar cleafix, no tienes por que flotar un elemento que no necesita ser flotado por maquetación, y el overflow hidden, es un poco eventual, por que si necesitas que algo sobresalga de ese contenedor no te vale
Usuario desconocido
Overflow:hidden es mano de santo. Se ajusta a su contenido y listo.
psycho
Me apunto eso
e_lena
Otra forma es darle un width: 100% y flotar el elemento padre, con eso consigues que recupere su altura.
Si no interesa darle el ancho 100% siempre se puede dar al siguiente elemento la propiedad de clear.
Aunque está bien eso de conocer distintas técnicas :)
ismael_gonzalez
Yo uso una clase CSS:
/* CLearfix */
.clearfix:after {content:".";display:block; height:0;clear:both;visibility:hidden;}
.clearfix { display:inline-block; }
/* Hide from IE Mac \*/
.clearfix { display:block; }
* html .clearfix { height:1px; }
/* End hide from IE Mac */