title: what is the difference between 'overflow and clear to clear float?
body: <p>html</p>
  
  <pre><code>&lt;ul&gt;
   &lt;li&gt; 
     &lt;button&gt;first part&lt;/button&gt;
    &lt;/li&gt;
   &lt;li&gt; 
     &lt;button&gt;second part&lt;/button&gt;
   &lt;/li&gt;
      &lt;li&gt;
      &lt;button&gt;third part&lt;/button&gt;
     &lt;/li&gt;
    &lt;/ul&gt;
  &lt;div id="bottom"&gt;Believe Me&lt;/div&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>body {
    font-size: 16px;
  }
  li {
    list-style: none;
    width: 300px;
    border: 1px solid black;
    margin-top: 20px;
    overflow: hidden;
  }
  li button {
    padding: 15px 10px;
    margin: 2px;
    display: block;
    float: right;
  }
  div#bottom {
    width: 100px;
    height: 50px;
    line-height: 50px;
    background-color: red;
    margin-top: 50px;
  }
  </code></pre>
  
  <p>we often use below class to clear 'float';</p>
  
  <pre><code>.clearfix{
    clear:both;
    overflow: hidden;
    contain: '';
  }
  </code></pre>
  
  <p>sometime, we can only use 'overflow',that can solve our problem.</p>
  
  <p>what difference between 'overflow' and 'clear'?</p>
  
  <p><a href="http://codepen.io/dukegod/pen/yONjzj" rel="nofollow">code about this question</a></p>