Unable to clear float with pseudo element

Question

I'm trying to clear the float with the css pseudo element, but it doesn't work. What am I doing wrong? Fiddle

HTML:

<div id="container">
    <div id="inner1"></div>
</div>
<div id="afterfloat"></div>

CSS:

#container{
    float:left;
    background: grey;
    border: 1px solid black;
}

#inner1{
    float: left;
    width: 100px;
    height: 100px;
    background: red;
    border: 1px solid black;
}

#container:after{
   content: "."; 
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;
}

#afterfloat{
    float: left;
    width: 100px;
    height: 100px;
    background: green;
    border: 1px solid black;
}

Answer 1

:after pseudo class in an element does not mean "after the ending tag of that element", it will put after all inner items in an element. So you cannot use it for clear-fixing. Try to use -

#afterfloat {
    clear: both;
}