Interfaz de usuario de Yahoo! Blog (YUIBlog)

  . Clearfix: antes,
 . Clearfix: after {
   contenido:; "".    
   display: block;    
   altura: 0;    
   overflow: hidden;	
 }
 . Clearfix: after {clear: both;}
 . Clearfix {zoom: 1;} / * IE <8 * / 

  display: inline-block;
 Ancho: <valor explícita <cualquier; 

12 comentarios

1. Gracias por el desbordamiento de desmitificación: ocultos. Yo tiendo a usar overflow: hidden como mi defecto "clearfix" solución, pero a veces tuviera que elegir otro (o yo pensaba que tenía que) a causa de elementos absolutamente posicionados fuera del área. Ahora sé que es más sutil de lo que pensaba.

   display: table trabaja demasiado, pero luego no se puede utilizar position: relative en ese elemento.

   Comentario por Florent V. - 27 de septiembre 2010 #

2. Este es un buen punto. Estoy seguro de que mucha gente que está usando display: table o display: table-cell no son conscientes de esta limitación.

   Gracias por tus comentarios.

   Comentario por Thierry Koblentz - 28 de septiembre 2010 #

3. Cómo funciona el "mejor alternativa" en IE6, IE7, IE8?

   Comentario por Jorge Epuñan - 30 de septiembre 2010 #

4. @ Jorge

   Sí lo hace, en realidad funciona en IE 5.0 +

   La lógica es que en 5,6,7 es decir el ancho explícita desencadena hasLayout mientras que "inline-block", crea un contexto de formato de bloque en el IE 8, y otros navegadores modernos.

   La anchura es la clave para que las cosas funcionen en todos los ámbitos, sin embargo, desde cuadros de estilo como "inline-block" shrink-wrap.

   Por ello, el artículo dice: "Si se puede aplicar una anchura al elemento que contiene los flotadores ..."

   Comentario por Thierry Koblentz - 01 de octubre 2010 #

5. Jugado en torno al uso de display: inline-block y ancho, pero he encontrado algunos errores.

   Si hay un espacio entre los divs que se mostró como un espacio entre los divs.
   La alineación vertical es un infierno. @ Thierry, ¿cómo lo uso?

   Echa un vistazo a mi intento aquí http://jsfiddle.net/UZr7L/

   Comentario por Michael Lajlev - 10 de octubre 2010 #

6. @ Michael

   Yo no lo uso en elementos que son hermanos (al menos no por diseño), pero tenga en cuenta que lo que estás experimentando no son errores.
   YUI las 3 ofertas de la red con este mediante el uso de letter-spacing y word-spacing (valores negativos).

   Comentario por Thierry Koblentz - 11 de octubre 2010 #

7. A raíz de este comentario de prensa perecederos , me di cuenta de que tenía un error tipográfico en allí, así que hemos actualizado la norma clearfix arriba.
   A diferencia de otros métodos, se utiliza overflow: hidden, no visibility: hidden.

   Gracias a Darren para plantear el tema :)

   Comentario por Thierry Koblentz - 22 de octubre 2010 #

8. Al parecer, con content: "020" para el clearfix es aún mejor

   Comentario por unwiredbrain - 28 de octubre 2010 #

9. ¡Ay! WordPress mordí el código!

   Fue content: " backslash zero zero two zero "

   Comentario por unwiredbrain - 28 de octubre 2010 #

10. @ Unwiredbrain

    Usted se refiere a una técnica que utiliza "visibility: hidden", pero lo que estoy utilizando es "overflow: hidden" por lo que debe hacer ninguna diferencia.

    Gracias por sus comentarios

    Comentario por Thierry Koblentz - 28 de octubre 2010 #

11. Oh. Debo haber confundido a los dos. Lo siento por eso.

    Comentario por unwiredbrain - 28 de octubre 2010 #

12. Maestro. Yo uso esta en cada proyecto ahora como parte de el repetitivo HTML5. Yo no uso todo el repetitivo, pero. Clearfix siempre viene muy bien. Gracias!

    Comentario por YJ - 10 de mayo 2011 #

Disculpa, los comentarios están cerrados en este momento.