Clear de float en CSS

Blogs Media: CSS Mania | VivirLatino | Sentido Web | Apps Mania

Jue13Dic2007

11:30 H (CET)| Temas: CSS

Aunque existe una forma común de hacer un clear de los float de los elementos anteriores:

<div class="clear"></div>

existe una forma más adecuada aunque realmente no es nueva, ya que ya se habló de ella en el 2004.

Para ello usaremos la propiedad :after que genera contenido antes del contenido del elemento. Tendremos una capa contenedora la cual modificaremos mediante CSS para que genere contenido invisible y con clear.

#container:after
{
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

#container
{display: inline-block;}

/* Oculta para IE-mac \*/
* html #container
{height: 1%;}

#container
{display: block;}

Clear Your Floats - The Right Way

Relacionados

Sitemap mediante CSS (Martes, 11 Dic 2007)
Konstruktors: snippets CSS (Viernes, 07 Dic 2007)

Luis Sacristán

Feedback (1) | Del.icio.us

Feedback (1) » Formulario

1. Francesc Rosàs ~ Jueves, 13 Dic 2007 | 19:52H:

Tampoco está de más recordar el método corto:

#container { overflow: hidden: _display: inline-block }

Aunque no siempre es aplicable y haya que acabar recurriendo al método que comentas.

Sentido Web