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

Validando el CSS de Thickbox

Durante un proyecto en específico se deció utilizar jQuery como librería para todo lo que fuera JavaScript. Reticente (ya que en ese entonces me animaba con Prototype y Script.aculo.us), comencé a utilizarlo y me fascinó como tenía grandes prestaciones, al momento de modificar el código HTML antes de ser renderizado. Se podían inyectar classes, ID‘s [...]

Floatfix: un nuevo clearfix

Ya es lunes, llego a revisar mis 600 RSS‘s que me esperan acumulados por el fin de semana y me quedo con un artículo que me llama la atención. Lo leo, lo analizo, lo pongo en práctica y ¡Zaz! Un nuevo paradigma se forma. Por todos es conocido y utilizado Clearfix; luego les comenté sobre [...]

Diseñando con CSS3: micro-curso y slides

Hace meses que tengo la idea de generar varios micro-cursos, donde en no más de 30 minutos expongo varias ideas puntuales sobre temas orientados al desarrollo web. En esta ocasión les traigo el primero de ellos: Diseñando con CSS3, donde muestro y demuestro mis argumentos para el diseño web orientado al CSS3. Nuevamente estos slides [...]

  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
Cargando