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

106

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?

html css Torben
źródło

Odpowiedzi:

261

Napisz tak:

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

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

Sandeep
źródło
Oto jak to zrobić. ale proszę zwrócić uwagę na punkt w mojej odpowiedzi na temat semantyki.
Alex
2
Tylko drobna informacja: ::afterpodwójny dwukropek jest zalecanym sposobem kierowania na pseudoelementy.
Dennis98
11
Każda przeglądarka obsługująca podwójny dwukropek (: :) Składnia CSS3 obsługuje również tylko składnię (:), ale IE 8 obsługuje tylko pojedynczy dwukropek, więc na razie zaleca się używanie pojedynczego dwukropka, aby zapewnić najlepszą obsługę przeglądarki. :: jest nowszym formatem z wcięciem w celu odróżnienia pseudo zawartości od pseudoselektorów. Jeśli nie potrzebujesz obsługi IE 8, możesz użyć podwójnego dwukropka. css-tricks.com/almanac/selectors/a/after-and-before
retroriff
dlaczego mielibyśmy to umieszczać: "content:" '; display: block; " ? a co jeśli chcesz owijkę inline?
Lucke
6

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%;
}
kernelpanic
źródło
5

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 .

Mahdi
źródło
1
wyświetlacz: stół może dodać dodatkowe odstępy; Zamiast tego używam display: block
The Cog
0

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/

Alex
źródło
1
To wcale nie jest semantyka. 1) Zawsze usuwamy element nadrzędny, jeśli jego dziecko unosiło się na nim, na przykład zgodnie z twoją odpowiedzią, jeśli chcę podać tło do UL, nie obejmuje to LI, ponieważ UL nie jest jasny i 2) Mam pytanie Dlaczego dajesz jasne Zajęcia w osobnym DIV przed P. jeśli dasz tylko P to też praca
sandeep
0

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

sachin kumar
źródło