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.
Ismael González
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 */
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 :)
psycho
Me apunto eso
Usuario desconocido
Overflow:hidden es mano de santo. Se ajusta a su contenido y listo.
Ismael González
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
¿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.
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?
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.
markshock
+1 a la solución de e-lena es la que suelo usar yo también. No me gusta usar los :after ...
Ismael González
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.
davidoliveras
Yo también soy partidario de utilizar el overflow!
jonitjuego
hola,
Muy útil el post, gracias!