Zastosowanie: after do wyczyszczenia elementów pływających

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

http://jsfiddle.net/8unU8/

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

Ale przykład nie działa:

http://jsfiddle.net/EyNnk/

Czy zawsze muszę tworzyć oddzielne elementy div, aby usunąć elementy pływające?

Napisz tak:

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

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

Nie, nie wystarczy zrobić coś takiego:

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

I następujący 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%;
}

To również zadziała:

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

.clearfix:after {
    clear: both;
}

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

Daj klasę clearfixdo dominującego elementu, na przykład swój ulelement.

Źródła tutaj i tutaj .

Tekst „dasda” nigdy nie będzie znajdował się w tagu, prawda? Semantycznie i aby był poprawnym HTML, po prostu dodaj do tego czystą klasę:

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

Posługiwać się

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

Podobnie jak rozwiązanie dostarczone przez Roko. Pozwala na wstawianie / zmianę treści za pomocą: after i: before pseudo. Szczegółowe informacje można znaleźć pod adresem http://www.quirksmode.org/css/content.html