title: How can I get button element below the div floats?
body: <p>How can I get the <strong>"Run"</strong> button below the divs?</p>
  
  <p><img src="https://i.stack.imgur.com/CDg73.png" alt="enter image description here"></p>
  
  <p>Here is the code: <a href="http://jsbin.com/ehurit/10/edit" rel="nofollow noreferrer">http://jsbin.com/ehurit/10/edit</a>  </p>
  
  <p>Same code copy-pasted below.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;style&gt;
    div.boxes { background:yellow; border:1px solid #AAA; width:80px; height:80px; margin:0 5px; float:left; }
    div.colored { background:green; }
    .clearfix:after {
      content: ".";
      display: block;
      clear: both;
      visibility: hidden;
      line-height: 0;
      height: 0;
  }
  
  .clearfix {
      display: inline-block;
  } 
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div class="boxes"&gt;&lt;/div&gt;
    &lt;div class="boxes" id="mover"&gt;&lt;/div&gt;
    &lt;div class="boxes"&gt;&lt;/div&gt;     
    &lt;button class="clearfix" id="run" &gt;Run&lt;/button&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>