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: 
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**](http://jsfiddle.net/JSuGN/)

To answer the question directly though, you should have applied the `:after` clearfix to `#mentions` - the parent, instead of the child.. [**jsFiddle here**](http://jsfiddle.net/nqD3m/) it works.
I think you need a #mention:after to do what you are looking for.

**For Instance,**

```
#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](http://jsfiddle.net/YsueS/8/)**

Hope this helps.