Han pasado 5 años desde el primer artículo donde describí exhaustivamente la causa y solución más común de clearfix. Y me asombra que sigan apareciendo soluciones diferentes e innovadoras a este problema que es transversal a todos los browsers. En este artículo, muestro y demuestro el más simple (pero no versátil) de los que existen en el mercado.
Dado un contenedor que contiene uno o más elementos flotando en su interior, siempre y cuando puedas definir un ancho fijo:
#container {
width: 600px;
display: inline-block;
}
.floto {
float: left;
}Este método se comporta bien cuando el ancho de los elementos interiores que están flotando es menor que el del padre; las cosas comienzan a complicarse cuando aumentan:
Para contrarrestarlo, define también ancho fijo en los elementos flotantes:
#container {
width: 600px;
display: inline-block;
}
.floto {
width: 280px;
float: left;
}Nada es perfecto… es un método más.
Comentarios
Buen tip, pero yo he visto otros que usan «overflow:auto» en el contenedor, hasta ahora me ha funcionado.
¿Qué piensan de eso, es ‘bueno’ usarlo?
Chekelin: el q mencionas es el q uso comunmente, el q mas me acomoda. Lo llamé Clearfix Ultimate.
Salu2.
Buenas…
Yo casi nunca uso float.. En su lugar uso algo asi:
#menu li {
display: -moz-inline-stack; /* FF2*/
display: inline-block;
*display: inline; /* IE */
zoom:1; /* IE */
vertical-align:top;
margin:0 10px;
}
De esta forma puedo centrar todo el menu sin usar un ancho fijo..
Hay alguna desventaja en usar esto en lugar de float?
Saludos!
No está nada mal, uno más para evitar el código innecesario, aunque mi preferido es el del ancho definido+overflow:hidden 🙂
neiker: me dejaste pensando, nunca he visto eso. Lo analizare con calma, aunq desde ya me asusta ver tantos hacks en el; personalmente no me gusta usarlos.
Chavalina: totalmente de acuerdo! es el q uso y domino tb! lejos el mejor, aqui cumplo con mostrar todos los q existan.
Si, pero el inline-block me suena mucho mas coherente que el float en la mayoría de lso casos.. creo que en unos años esa va a ser la forma estándar.. 😛
Saludos!