Displayfix: lo último en clearfix

17/mar/2011 6

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.

Comentarios

  1. Chekelin [#]

    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?

  2. Jorge Epuñan [#]

    Chekelin: el q mencionas es el q uso comunmente, el q mas me acomoda. Lo llamé Clearfix Ultimate.

    Salu2.

  3. neiker [#]

    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!

  4. Chavalina [#]

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

  5. Jorge Epuñan [#]

    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.

  6. neiker [#]

    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!

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab