title: Why <div class="clear"></div> used?
body: <p>I'll adapt my self to what <a href="http://www.52framework.com" rel="noreferrer">52framework.com</a> offers. (HTML5, CSS3, JS framework)
  Despite watching grid tutorial video and inspecting other <a href="http://demo.52framework.com/" rel="noreferrer">demo</a> source codes, I couldn't understand why framework used <code>&lt;div class="clear"&gt;&lt;/div&gt;&lt;!-- clear --&gt;</code> code at 12th line.</p>
  
  <p>Code below's address is: <a href="http://demo.52framework.com/demos/framework/grid.html" rel="noreferrer">http://demo.52framework.com/demos/framework/grid.html</a></p>
  
  <pre><code>&lt;body&gt;
  &lt;div class="row"&gt;
  &lt;header&gt;        
          &lt;div class="logo col_7 col"&gt;52framework&lt;/div&gt;&lt;!-- logo col_7 --&gt;        
              &lt;nav class="col_9 col"&gt;
            &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#navigation"&gt;navigation 1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#navigation"&gt;navigation 2&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="last"&gt;&lt;a href="http://www.enavu.com"&gt;enavu network&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
              &lt;/nav&gt;&lt;!-- nav col_9 --&gt;
          &lt;div class="clear"&gt;&lt;/div&gt;&lt;!-- clear --&gt;
      &lt;/header&gt;
  &lt;/div&gt;&lt;!-- row --&gt;
  ...
  </code></pre>
  
  <p>This code below is also from same source but as you see <code>&lt;div class="clear"&gt;&lt;/div&gt;&lt;!-- clear --&gt;</code> piece of code isn't used here even though more partition has been done here.</p>
  
  <pre><code>&lt;!-- this section shows off the grid and how it can be used --&gt;
  &lt;section class="row" id="grid"&gt;
      &lt;h2&gt;Grid Framework&lt;/h2&gt;
      &lt;div class="col col_8"&gt;
          col_8
          &lt;div class="row"&gt;
              &lt;div class="col col_1"&gt;col_1&lt;/div&gt;
              &lt;div class="col col_7"&gt;col_7
                  &lt;div class="row"&gt;
                      &lt;div class="col col_3"&gt;col_3&lt;/div&gt;
                      &lt;div class="col col_4"&gt;col_4&lt;/div&gt;
                  &lt;/div&gt;&lt;!-- row --&gt;
              &lt;/div&gt;
          &lt;/div&gt;&lt;!-- row --&gt;
      &lt;/div&gt;&lt;!-- col_8 --&gt;
    &lt;div class="col col_8"&gt;
          col_8
          &lt;div class="row"&gt;
              &lt;div class="col col_4"&gt;4&lt;/div&gt;
              &lt;div class="col col_4"&gt;4&lt;/div&gt;
          &lt;/div&gt;&lt;!-- row --&gt;
      &lt;/div&gt;&lt;!-- col_8 --&gt;
    &lt;div class="col_16 col" style="margin-top:15px;"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col col_9"&gt;col_9&lt;/div&gt;
              &lt;div class="col col_7"&gt;col_7&lt;/div&gt;
          &lt;/div&gt;&lt;!-- row --&gt;
      &lt;/div&gt;&lt;!-- col_16 --&gt;
    &lt;div class="col_16 col"&gt;
          &lt;a href="http://www.52framework.com/documentation/" class="documentation"&gt;Grid Framework Documentation&lt;/a&gt;
      &lt;/div&gt;&lt;!-- col_16 --&gt;
  &lt;/section&gt;&lt;!-- row --&gt;
  </code></pre>
  
  <h2>Related CSS codes:</h2>
  
  <pre><code>.clear { clear:both; display:block; overflow:hidden; visibility:hidden; height:0px;}
  
  .col {
      margin-left:10px; margin-right:10px;
      display: inline;
      overflow: hidden;
      float: left;
      position: relative;
  }
  
  .row{
      width: 960px;
      margin: 0 auto;
      overflow: hidden;
  }
  .row .row {
      margin: 0 -10px;
      width: auto;
      display: inline-block;
  }
  
  /* Column widths, and element width based on grid */
  
  .col_1, .width_1     {  width:40px;  }
  .col_2, .width_2     {  width:100px; }
  .col_3, .width_3     {  width:160px; }
  .col_4, .width_4     {  width:220px; }
  .col_5, .width_5     {  width:280px; }
  .col_6, .width_6     {  width:340px; }
  .col_7, .width_7     {  width:400px; }
  .col_8, .width_8     {  width:460px; }
  .col_9, .width_9     {  width:520px; }
  .col_10, .width_10   {  width:580px; }
  .col_11, .width_11   {  width:640px; }
  .col_12, .width_12   {  width:700px; }
  .col_13, .width_13   {  width:760px; }
  .col_14, .width_14   {  width:820px; }
  .col_15, .width_15   {  width:880px; }
  .col_16, .width_16   {  width:940px; }
  </code></pre>