Używanie: po, aby usunąć pływające elementy

Question

Mam listę i li mają float:left;. Zawartość po <ul> powinna być prawidłowo wyrównana. Dlatego mogę zbudować następujące:

http://jsfiddle.net/8unU8/

pomyślałem, że mogę usunąć <div class="clear"> za pomocą selektorów pseudo jak: after.

Ale przykład nie działa:

http://jsfiddle.net/EyNnk/

Czy zawsze trzeba utworzyć osobne div wyraźne elementy pływające?

Answer 1

Napisz tak:

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

Sprawdź to http://jsfiddle.net/EyNnk/1/

Answer 2

Tekst 'dasda' nigdy nie będzie w znaczniku, prawda? Semantycznie i ważność HTML to, aby być, wystarczy dodać jasną klasę, że:

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

Answer 3

Nie, nie wystarczy, aby zrobić coś takiego:

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

I następujące 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

Zastosowanie

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

Podobnie jak rozwiązanie dostarczane przez Roko. Umożliwia wstawianie/zmianę zawartości za pomocą: after i: before psuedo. Aby uzyskać szczegółowe sprawdzić http://www.quirksmode.org/css/content.html

Answer 5

to będzie działać jak dobrze:

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

.clearfix:after { 
    clear: both; 
} 

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

swoja klasę clearfix do elementu rodzic, na przykład kod elementu ul.

Źródła here i here.