title: Using clearfix to cancel floating
body: <p>During learning CSS I tried to make the exact example as you can see on the link below using <strong>clearfix</strong> (sorry for non-English text, but I have no other) 
  <a href="http://htmlbook.ru/files/images/layout2/3-41.png" rel="nofollow">http://htmlbook.ru/files/images/layout2/3-41.png</a>
  I need to make it using <strong>float</strong> and <strong>clearfix</strong> hack</p>
  
  <p>My code is:
  <strong>HTML</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Learning float&lt;/title&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;link rel="stylesheet" type="text/css" href="float.css"&gt;
  &lt;/head&gt;
      &lt;div class="col1 clearfix"&gt;&lt;h3&gt;Menu&lt;/h3&gt;
          &lt;p&gt;Best photo&lt;/p&gt;
          &lt;p&gt;By ages&lt;/p&gt;
          &lt;p&gt;Rate&lt;/p&gt; 
          &lt;p&gt;By comments&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="col2"&gt;
          &lt;div class="photo"&gt;
              &lt;p&gt;&lt;img src="http://churchs.kiev.ua/images/stories/Hrams/Myzej/Sofia_kievsk_1.jpg" alt="" /&gt;&lt;/p&gt;
              &lt;p class="caption"&gt;Софийский собор&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="photo clearfix"&gt;
              &lt;p&gt;&lt;img src="http://rybinsk.go2all.ru/imgs/92/1/85222.jpg" alt="" /&gt;&lt;/p&gt;
              &lt;p class="caption"&gt;Польский костёл&lt;/p&gt;
          &lt;/div&gt;
          &lt;p&gt;This text should be below photos&lt;/p&gt;
      &lt;/div&gt;
      &lt;p&gt;This text should go below the columns&lt;/p&gt;
  
      &lt;div class="footer"&gt;Подвал&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.col1 {
      background-color: #BDBDBD;
      width: 250px;
      margin-right: 10px;
      float: left;
  }
  
  .col2 {
      background-color: #A9F5F2;
      float: left;
      width: 500px;
  }
  
  .photo {
      float: left;
      margin-right: 10px;
      width: 170px;
  }
  
  img {
      width: 150px;
      height: 150px;
  }
  
  .clearfix:after {
     content: " "; 
     visibility: hidden;
     display: block;
     height: 0;
     clear: both;
  }
  
  .footer {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      background-color: green;
      text-align: center;
  }
  </code></pre>
  
  <p>What's wrong with using of clearfix.</p>
  
  <p>Will appreciate any answer!</p>