I cannot understad why this code doesn't prevent the footer from spanning up to the top with the clearfix hack. It does work with the overflow hidden technique, and also with the div with clear both.


The yellow background is from the footer, but as it can be seen, it goes up to the top.

HTML Code:
<html lang='pt-br'>
    <meta charset='UTF-8'>

        body {
      header {
        padding: 1em 0 1em 0;
        text-align: center;
        background-color: maroon;
      .container {
        width: 600px;
        margin: 0 auto;
        background-color: #C0C0C0;
      nav {
        width: 200px;
        float: left;
      section {
        /* overflow: hidden; */
        width: 399px;
        float: left;
        border-left: 1px solid yellow;
        border-bottom: 1px solid blue;
      footer {
        background-color: yellow;
        text-align: center;
        padding: 1em 0 1em 0;
      .cf:before, .cf:after {
          content: '';
          display: block;
          clear: both;
          /* height: 0; */
          /* visibility: hidden; */
      .cf {
          /* for IE/Mac */
          /* display: inline-block; */



  <div class='cf container'>
      <h1>The Header</h1>

    <nav class=''>
        <li>Master Yoda</li>
        <li>Jedi Masters</li>
        <li>Lord Sith</li>
        <li>Jedi Tux</li>
        <li>Athunye GoTek</li>
        <li>Hello World</li>

    <section class='cf'>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer iaculis
      tincidunt velit. Integer malesuada velit ut sapien congue...</p>

  <div style='clear: both;'></div>

  <footer class=''>
    <p>This is the footer &copy; 2013</p>