Morton 5 de septiembre de 2013 a las 06.06
   Imprimir artículo
elWebmaster.com

Truco para una limpieza más efectiva de tu CSS


css3wide1En CSS, limpiar los floats puede ser tan importante como estructurar todo lo demás. Para hacerlo, se suele utilizar el recurso de agregar un elemento que como estilo “clear: both” para realizar la limpieza. Pero hay una mejor manera de hacerlo.

Para este truco, usaremos los pseudo-elementos :before y :after en un elemento padre. Supongamos que tenemos esta estructura:

  1. <div class="clear">
  2.         <div class="floated"></div>
  3.         <div class="floated"></div>
  4.         <div class="floated"></div>
  5.     </div>

Esto será lo que debemos utilizar de CSS:

  1. .clear:before, .clear:after {
  2.     content: "\0020";
  3.     display: block;
  4.     height: 0;
  5.     overflow: hidden;
  6. }
  7.    
  8. .clear:after {
  9.     clear: both;
  10. }

Con esto, el css limpiará los elementos hijos para que el próximo set de elementos tenga una base limpia de la cual partir.

¡Esperamos que te haya sido de utilidad!

Fuente original del artículo: David Walsh Blog
Traducción realizada por
elWebmaster.com


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (6)

  1. eze dice:

    Otro:
    /* clearfix */
    .clearfix:after { visibility: hidden; display: block; font-size: 0; content: ” “; clear: both; height: 0; }
    * html .clearfix { zoom: 1; } /* IE6 */
    *:first-child+html .clearfix { zoom: 1; } /* IE7 */

  2. George dice:

    eze estamos en 2013 y te preocupas por ie 6 y 7?

  3. Oscar Herrera - RedesSociales dice:

    Muchas gracias me sirvió muchísimo este truco, es realmente lo que esperaba

  4. samuel barak caycho dice:

    MUY BUENO

  5. Fran dice:

    George, Siempre depende del público al que quieras llegar ¿no? Si buscas accesibilidad y cross-browser, hay que tener en cuenta siempre al mayor número de usuarios -y por consiguiente navegadores- a la hora de realizar tu CSS, tu HTML, etc.

    :)

  6. trabajos en altura dice:

    Estoy entusiasmado de encontrar webs donde hallar informacion tan practica como esta. Gracias por poner este post.

    Saludos

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder