Displayfix: lo último en clearfix

17/Mar/2011 103

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. stromectolforte.com [#]

    ivermectin https://stromectolforte.com/ 3mg ivermactin ivermectin kills what parasites

  2. ivermectin tablets [#]

    effects of low blood pressure http://stromectl.com – ivermectin for humans uk

  3. stromectolforte.com [#]

    how much is ivermectin https://stromectolforte.com/# ivermectin for humans purchasing ivermectin for humans

CSSLab