Displayfix: lo último en clearfix

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;
   }

Ver ejemplo

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:

Ver ejemplo 2

Para contrarrestarlo, define también ancho fijo en los elementos flotantes:

#container {
   width: 600px;
   display: inline-block;
}
   .floto {
      width: 280px;
      float: left;
   }

Ver ejemplo 3

Nada es perfecto… es un método más.

Sobre el Autor: Jorge Epuñan

Soy quien escribe en este sitio: diseñador gráfico de profesión, desarrollador web por preferencia y amante de la interacción humano-computador. Cuando no pienso en web, salgo a trotar por mis barrios en Santiago, Chile o me junto con amigos a un bar a conversar sobre nuevas tendencias y tecnologías. Twitter profesional y personal, además del Contacto.

Relacionados

Outlinr: a bookmarklet

Outlinr: web inspector para los pobres / web inspector for the poors Selecciona tu idioma / Select your language: English Español EN Frequently on my debugging stage (when I need to solve something within the HTML/CSS markup that is causing some conflict) I use the CSS outline property to contour the HTML elements so as [...]

El espacio blanco

La propiedad CSS para white-space no es muy conocida ni muy utilizada, pero sí tiene una importante utilidad al momento de diagramar textos. Son esos detalles finos que marcan la diferencia entre un escritor de código web, y un power master pro en estilos. White-space define cómo se comportan los espacios en blanco dentro de [...]

Tip Precoz 5: teclados de iPhone/iPad

Como muchos ya saben, Webkit siempre ha sido pionero en implementar nuevas tecnologías y las últimas versiones de los lenguajes web existentes. Muchas etiquetas y atributos de HTML 5 por ejemplo, ya se pueden utilizar desde hace mucho tiempo en browsers como Safari, Konqueror y Chrome. Este pequeño tip mostrará un atributo de HTML 5 [...]

  1. 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
    17 / Marzo / 2011

  2. 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!

    neiker
    17 / Marzo / 2011

  3. No está nada mal, uno más para evitar el código innecesario, aunque mi preferido es el del ancho definido+overflow:hidden :-)

    Chavalina
    18 / Marzo / 2011

  4. 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.. :P

    Saludos!

    neiker
    21 / Marzo / 2011

OJO: si vas a agregar código fuente, asegúrate de convertirlas antes a entidades HTML, sino el comentario no se renderizará correctamente.

compartido 5 veces