title: clear both or overflow hidden , a clearfix solution
body: <p>I am designing table less website using <code>div</code> elements and i have many floated left and right <code>div</code> elements inside parent <code>div</code> element.</p>
  
  <p>Now, I am using another <code>div</code> element to fix parent <code>div</code> height automatically:</p>
  
  <pre><code>&lt;div style="clear:both"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>But, I came to know following works in same way:</p>
  
  <pre><code>&lt;div style="overflow:hidden"&gt;
      &lt;div style="float:left"&gt;...&lt;/div&gt;
      &lt;div style="float:right"&gt;...&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And , i tried, it works and which reduces the <strong>Number of DOM Elements</strong> as well.</p>
  
  <p>But I don't whether it is <strong>cross-browser</strong> or not.</p>
  
  <p>Which method is effective and cross-browser? </p>