Usando: after para limpar elementos flutuantes

106

Eu tenho uma lista e os li têm um float:left;. O conteúdo após o <ul>deve ser alinhado corretamente. Portanto, posso construir o seguinte:

http://jsfiddle.net/8unU8/

Pensei que posso remover o <div class="clear">usando pseudo seletores como: after.

Mas o exemplo não está funcionando:

http://jsfiddle.net/EyNnk/

Sempre tenho que criar um div separado para limpar os elementos flutuantes?

html css Torben
fonte

Respostas:

261

Escreva assim:

.wrapper:after {
    content: '';
    display: block;
    clear: both;
}

Verifique este http://jsfiddle.net/EyNnk/1/

sandeep
fonte
É assim que se deve fazer. mas observe o ponto em minha resposta sobre semântica.
Alex
2
Apenas uma pequena informação: ::aftercom dois pontos duplos é a forma recomendada de direcionar pseudo-elementos.
Dennis98,
11
Todos os navegadores que suportam a sintaxe de dois pontos duplos (: :) CSS3 também oferecem suporte apenas à sintaxe (:), mas o IE 8 só oferece suporte a dois pontos simples, portanto, por enquanto, é recomendado usar apenas dois pontos para melhor suporte ao navegador. :: é o formato mais recente recuado para distinguir o pseudo conteúdo dos pseudo seletores. Se você não precisa do suporte do IE 8, sinta-se à vontade para usar dois-pontos duplos. css-tricks.com/almanac/selectors/a/after-and-before
retroriff
por que devemos colocar isto: "conteúdo: ''; display: block;" ? e se você quiser um invólucro embutido?
Lucke de
6

Não, não é o suficiente para fazer algo assim:

<ul class="clearfix">
  <li>one</li>
  <li>two></li>
</ul>

E o seguinte CSS:

ul li {float: left;}


.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
   display: block;
}

* html .clearfix {
   height: 1%;
}
kernelpânico
fonte
5

Isso também funcionará:

.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
} 

.clearfix:after {
    clear: both;
}

/* IE 6 & 7 */
.clearfix {
    zoom: 1;
}

Dê a classe clearfixao elemento pai , por exemplo, seu ulelemento.

Fontes aqui e aqui .

Mahdi
fonte
1
display: a mesa pode adicionar espaçamento extra; Eu uso display: block em vez
The Cog
0

O texto 'dasda' nunca ficará fora de uma tag, certo? Semanticamente e para ser HTML válido como é, basta adicionar a classe clara a isso:

http://jsfiddle.net/EyNnk/2/

Alex
fonte
1
Não é semântica de forma alguma. 1) Sempre limpamos o elemento pai se seu filho tiver flutuado nele, por exemplo, de acordo com sua resposta, se eu quiser fornecer informações sobre o UL, ele não cobre o LI porque o UL não é claro & 2) Eu tenho uma pergunta por que você deu claro Aula em um DIV separado antes de P. se você der apenas para P, também funcionará
sandeep
0

Usar

.wrapper:after {
    content : '\n';
}

Muito parecido com a solução fornecida por Roko. Permite inserir / alterar conteúdo usando: after e: before psuedo. Para obter detalhes, consulte http://www.quirksmode.org/css/content.html

sachin kumar
fonte