replace the clear:both with pseudo class

Question

Previously, when I had floatings blocks, and i will stop the float, i used ;

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

But now, i'm solve this problem with pseudo class :

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

I has always works perfectly. But today... It doesn't work... ! Look at this clear example : http://jsfiddle.net/YsueS/2/

I know my problem is a total beginner problem. I have sold this problem so many times... I really don't understand why it doesn't work here !

Many thanks all of you !

Answer 1

Sure - you could clear it via an :after clearfix, however the most optimal, lightweight solution would just be to set overflow:hidden on the parent, achiving the desired effect with much less coding.

#mention {
    overflow: hidden;
}

jsFiddle here

To answer the question directly though, you should have applied the :after clearfix to #mentions - the parent, instead of the child.. jsFiddle here it works.