zastąpienie wyczyść: obie z pseudo klasy

Question

Poprzednio, gdy miałem pływające bloki, a ja zatrzymam pływak, użyłem;

<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!

Answer 1

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.

Answer 2

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

np

#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.

Answer 3

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

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

JSFIDDLE