Blog Web Standards

Soluções para os problemas enfrentados pelos desenvolvedores HTML e CSS no dia-a-dia

Última modificação: 31 maio 2011

Em desuso. Esse código está ultrapassado em nosso padrão, então evitamos usá-lo.

Há uma forma de conseguirmos fazer um elemento “englobar” os elementos que nele estão inseridos, mesmo usando “float”.

Por exemplo, em uma galeria de imagens, onde cada <li> usa “float: left”, a lista, teoricamente, não conseguiria agregar todos os itens, pois estes usam “float”.

Para reverter este caso, basta usar a classe “contemfloat”, bastante utilizada em nossos projetos:

/* contendo float */
.contemfloat:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.contemfloat { display: inline-block; }
/* Hides from IE-mac \*/
* .contemfloat { height: 1%; }
.contemfloat { display: block; }
/* End hide from IE-mac */

Caso você precise se algo mais rápido e prático, pode usar a propriedade overflow no CSS dessa forma:

overflow: hidden;

* Update: Reformulação do CSS padrão. Procuramos evitar o uso desse método, preferimos optar pelo uso do overflow e caso exista problema com o IE6 incluímos “height: 1%;” apenas para esse navegador.