zastąpienie wyczyść: obie z pseudo klasy

Poprzednio, gdy miałem pływające bloki, a ja zatrzymam pływak, użyłem;zastąpienie wyczyść: obie z pseudo klasy

<div style="clear:both"></div>

Ale teraz, jestem rozwiązać ten problem z klasy pseudo:

.last_floating_div:after { 
content: ""; 
display: table; 
clear: both; 
}

ja zawsze działa idealnie. Ale dzisiaj ... To nie działa ...! Spójrz na ten jasny przykład: http://jsfiddle.net/YsueS/2/

Wiem, że mój problem to problem dla początkujących. Sprzedałem ten problem tyle razy ... Naprawdę nie rozumiem, dlaczego to nie działa tutaj!

Dziękuję wszystkim!

Źródło

2013-10-31 Damien

Czy tego chciałeś? http://jsfiddle.net/YsueS/3/ –

Dzięki Josh, wynik jest doskonały! W tym przypadku rozwiązanie JoshC wydaje się być bardziej lekkie, ale utrzymuję Twoje rozwiązanie na dalsze potrzeby :) – Damien

Nie ma problemu! Przelew jest najbardziej podstawowym i powszechnie stosowanym sposobem osiągnięcia tego. Możesz także użyć 'overflow: auto' dla elementów absolutnych, w które wierzę. –

Oczywiście - można to wyczyścić za pomocą funkcji czyszczenia o numerze :after, jednak najbardziej optymalnym, lekkim rozwiązaniem byłoby ustawienie na rodzica wartości overflow:hidden, uzyskując pożądany efekt przy znacznie mniejszym kodowaniu.

#mention { 
    overflow: hidden; 
}

jsFiddle here

Aby odpowiedzieć na pytanie bezpośrednio, choć należy mieć zastosował :after clearfix do #mentions - rodzica, zamiast dziecka .. jsFiddle here to działa.

Źródło

2013-10-31 19:42:36

'overflow: hidden;' będzie najlepszą odpowiedzią na starsze IE, prawda? –

Dziękujemy! Masz rację, w tym przypadku przepełnienie jest naprawdę lekkie niż pseudo klasa :) – Damien

Myślę, że potrzebujesz #mention: po to, aby zrobić to, czego szukasz.

#mention:after { 
    visibility: hidden; 
    display: block; 
    font-size: 0; 
    content: " "; 
    clear: both; 
    height: 0; 
    } 
#mention { display: inline-block; } 

* html #mention{ height: 1%; } /* for older ie */ 
#mention { display: block; }

WORKING DEMO

Nadzieja to pomaga.

Źródło

2013-10-31 19:43:11 Nitesh

phhew. hacki ... – Jawad

Nie. Odpowiedzi na kompatybilność z przeglądarką krzyżową :) - @Jawad – Nitesh

ok. +1 niż. najfatalniejszy. – Jawad

Jeśli po prostu dodasz :after do identyfikatora mention, uzyskasz pożądany efekt.

#mention:after { 
    content: ""; 
    display: table; 
    clear: both; 
}

JSFIDDLE

Źródło

2013-10-31 19:44:09

zastąpienie wyczyść: obie z pseudo klasy

Odpowiedz

Powiązane problemy