clearfix ultimate

9/Jun/2008 1014

Muchas han sido las veces que he nombrado y recontra-aplicado el método de .clearfix aquí en CSSLab. Lo suelo nombrar a menudo en clases, ya que es el método más fácil de entender y sobrellevar el colapso de cajas contenedoras de ventanas flotantes. Fácil porque basta con aplicar una class="clearfix" y nuestra caja vuelve a comportarse como debería. Pero es código extra que quizás ensucie nuestra hoja de estilos, y andar agregando class‘es que no tienen sentido semántico puede que no agrade a los más puristas. Pero existe desde hace mucho tiempo otra solución al mismo problema.

Ya lo mencioné de rebote en un artículo. Este método no tiene nombre conocido (por lo menos en los sitios que he leído no lo nombran de alguna manera especial). Es tan simple que dan ganas de tirarse por la ventana por no conocerlo antes.

Se trata de utilizar la propiedad CSS overflow en la caja que está colapsando. Eso es todo. Basta con incluirla en algún de los siguientes valores:

  • overflow: auto;
  • overflow: hidden;
  • overflow: scroll;

Y la caja volverá a comportarse como debiera: envolviendo a los elementos flotantes dentro de ella. La teoría es simple: como el valor por defecto es overflow: visible, esto hace que la caja crezca para adaptarse al tamaño que tienen sus elementos (etiquetas) hijo. Con visible se asume que se han dado los valores de ancho (width) y alto (height) y por eso nada sucede; ya con los demás valores ya nombrados, obliga a la caja contenedora a re-calcular sus dimensiones, tomando en cuenta ahora a los elementos hijos que están con float. Con alguno de estos valores de overflow, le recordamos a la caja contenedora que tienen elementos hijo (flotando) y que debe conocer sus tamaños para envolverlos.

El ejemplo más clásico a continuación. El HTML:

<div id="contenedor">
     <div class="flotando_izquierda">
          <p>Floto hacia la izquierda</p>
     </div>
     <div class="flotando_derecha">
          <p>Floto hacia la derecha</p>
     </div>
</div>

Y el CSS:

#contenedor {
     overflow: auto;
     height: 1%;
}
     .flotando_izquierda {
          float: left;
     }
     .flotando_derecha {
          float: right;
     }

Ver ejemplo

SafariFirefoxOperaInternet Explorer 6Internet Explorer 7

Para que IE6 reconociera este método, hubo que aplicar a la caja contenedora (en este caso #contenedor) height: 1%, haciendo que todos los browsers modernos desplieguen de igual manera este método.

El único detalle que le encontré fue al momento de utilizar dentro de #contenedor un elemento posicionado absolutamente, relativo a él, lo que hace que se muestre la barra de scroll (dado el overlow: auto;). En ese caso, lo mejor es utilizar overflow: hidden, lo que hace a la caja esconder al elemento absoluto, en el caso de éste ser más grande que la caja misma.

Ver ejemplo con absolute

Este caso es bastante específico, y creo que no hace que este método deje de ser una muy buena alternativa de despeje.

Links:

Comentarios

  1. howtogetmodafinil [#]

    https://modafilmdmodafinil.com/ modafinil generic

  2. bactrim for sinus infection [#]

    sulfamethoxazole rash bactrim for uti

  3. ivermectin 12 [#]

    buy stromectol pills http://stromectolforte.com/# ivermektin tabletta uk stromectol

  4. stromectolforte.com [#]

    ivermectin for sale for humans https://stromectolforte.com/# ivermectin human dosage ivermectin tablets dosage

  5. ivermectinhumans.com [#]

    need a doctor http://ivermectinhumans.com – generic ivermectin

  6. cialis generic [#]

    cialis without a doctor prescription https://cialiswithdapoxetine.com/

  7. ivermectin [#]

    ivermectin for humans amazon https://stromectolforte.com/# ivermectin for humans for sale ivermectin

  8. stromectol online canada [#]

    ivermectin clinical trials http://stromectolforte.com/# cena stromektolu where can i buy ivermectin

  9. bactrim for uti [#]

    https://bactrimsulfamethoxazole.com/ co trimoxazole dosage for adults

  10. Ashblabs [#]

    discount cialis prices

  11. ivermectin 12 mg [#]

    Non-specific Message About this outcome
    https://ivermectstromect.com ivermectin over the counter
    https://ivermectinst.com ivermectin for humans
    https://stromectolivermect.com ivermectin 3 mg
    https://stromectolivermect.com ivermectin 3 mg
    https://ivermectinstrom.com ivermectin for sale

  12. steroidsideeffects [#]

    prednisone long term side effects prednisolona

  13. ivermectin 12 mg [#]

    Global Information Fro this outcome
    https://stromectolivermect.com ivermectin 3 mg
    https://stromectolivermect.com ivermectin 12 mg
    https://stromectolivermect.com ivermectin 3 mg
    https://ivermectinstrom.com ivermectin 3 mg
    https://ivermectinsts.com ivermectin over the counter

  14. Ahlaczi [#]

    taking levitra two days row https://www.levitraoff.com user review of levitra

CSSLab