html - マイクロクリアフィックスが効かない

Question

固定レイアウトでニコラス ギャラガーのマイクロ クリアフィックスを使用しています。私のレイアウトでは、緑色のフッターは表示されません。これは、clearfix が正しく機能しないことを意味します

<div class="container">
    <aside class="al">
    </aside>
    <section class="content">

    </section>
    <aside class="ar">
    </aside>
    <footer class="cf">
    </footer>
</div>

CSS

.container {
    width: 500px;
    height: 400px;
    margin: 0 auto;
}
.al {
    background: red;
    width: 100px;
    height: 100px;
    float: left;
}
.content {
    float: left;
    width: 300px;
    height: 100px;
    background: black;
}
.ar {
    background: red;
    width: 100px;
    height: 100px;
    float: left;
}
footer {
    background: blue;
    width: 100%;
    height: 100px;
    background: green;
}

とマイクロクリアフィックス

.cf:after, .cf:before {
    content: " ";
    display: table; 
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}

デモ

私は何を間違っていますか。どうすればこれを機能させることができますか。誰か助けてください