Kullanma: yüzer elemanların temizlenmesinden sonra

Question

Listem var ve li'nin bir float:left;. <ul>'dan sonraki içerikler doğru şekilde hizalanmalıdır. Dolayısıyla ben şu inşa edebilirsiniz:

http://jsfiddle.net/8unU8/

düşündüm, ben gibi sözde seçicileri kullanarak <div class="clear"> kaldırabileceğini: sonra.

Ama örnek çalışmıyor:

http://jsfiddle.net/EyNnk/

Hep yüzen elemanları temizlemek için ayrı bir div oluşturmak zorunda mı? Böyle

Answer 1

Yaz:

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

Kontrol bu http://jsfiddle.net/EyNnk/1/

Answer 2

metin 'dasda' doğru bir etiketi içinde olmayacak asla? olmak, sadece açık sınıf eklemek olarak semantik ve geçerli HTML bunu olmaya:

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

Answer 3

Hayır, böyle bir şey yapmak için 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%; 
} 

Answer 4

Kullanım

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

Roko tarafından sağlanan çözüm gibi. İçeriği kullanarak/değiştirmeye izin verir: sonra ve: psuedo'dan önce. Ayrıntılar http://www.quirksmode.org/css/content.html

Answer 5

kontrol için bu yanı çalışacaktır:

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

.clearfix:after { 
    clear: both; 
} 

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

örneğin ebeveyn elemana sizin ul eleman sınıfını clearfix ver.

Kaynaklar here ve here.