Kullanma: sonra yüzen öğeleri temizlemek için

Bir listem var ve li'lerin bir float:left;. Sonrasındaki içerikler <ul>doğru şekilde hizalanmalıdır. Bu nedenle aşağıdakileri oluşturabilirim:

http://jsfiddle.net/8unU8/

Şöyle <div class="clear">sözde seçicileri kullanarak kaldırabileceğimi düşündüm : after.

Ancak örnek işe yaramıyor:

http://jsfiddle.net/EyNnk/

Kayan öğeleri temizlemek için her zaman ayrı bir div oluşturmam gerekir mi?

Şöyle yazın:

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

Bunu kontrol edin http://jsfiddle.net/EyNnk/1/

Hayır, bunun gibi bir şey yapmak yeterli değil:

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

Ve aşağıdaki 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%;
}

Bu da işe yarayacak:

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

.clearfix:after {
    clear: both;
}

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

Sınıf ver clearfixiçin ana örneğin eleman senin ulelemanı.

Kaynaklar burada ve burada .

'Dasda' metni asla bir etiketin içinde olmayacak, değil mi? Anlamsal olarak ve geçerli HTML olması için, buna açık sınıfı eklemeniz yeterlidir:

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

Kullanım

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

Roko tarafından sağlanan çözüm gibi. Psuedo öncesi: after ve: kullanarak içerik eklemeye / değiştirmeye izin verir. Ayrıntılar için http://www.quirksmode.org/css/content.html adresini kontrol edin.