title: IE7: Extra space caused by Clearfix container with element `float: right;` and margin
body: <p>I am experiencing a weird bug in IE7 where margin is seemingly added twice. Once in the normal spot below the <code>thing</code> element and another between the button and bottom of the container. <em>Note, there is <code>margin-bottom</code> on the button itself but I am talking about the extra margin added below that.</em></p>
  
  <p>You can see in the gif below, that when I toggle the <code>margin-bottom</code> on the <code>thing</code> element, it toggles space between the <code>thing</code> element and the button(normal) but also between the button and the end of the container(bug).</p>
  
  <p>I have a feeling that this is part of the <code>zoom: 1;</code> hasLayout clearfix used on the <code>.block</code>. If I add an explicit <code>clear: both;</code> div, it also has this extra space but that can be mitigated with putting <code>height: 0;</code> on the clear div.</p>
  
  <p><strong>This extra space only appears with <code>float: right;</code> on the button</strong></p>
  
  <p>I am using a HTML5 doctype but have also tried a strict doctype and it has no effect in the true IE7 or emulated version.</p>
  
  <p>How can I remove the extra space at the bottom while maintaining the self clearing <a href="http://nicolasgallagher.com/micro-clearfix-hack/" rel="nofollow">micro-clearfix</a> dom structure?</p>
  
  <p>The gif below is from Windows 8.1 IE with IE7 emulation/compatibility. Here is the <a href="https://i.imgur.com/lys6mf7.png" rel="nofollow">same bug in true IE7 on Windows XP</a>.</p>
  
  <p><img src="https://i.imgur.com/Zd6y2Vj.gif" alt=""></p>
  
  <h2>Code:</h2>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.block
  {
      background: #888888;
      
      /* Clearfix */
      zoom: 1;
  }
  
  .thing-with-margin
  {
      margin-bottom: 10px;
      
      background: #88dd88;
  }
  
  .button
  {
      float: right;
      
      /* Make the input/button shrink to the correct size in ie7 */
      overflow: visible;
      
      margin-bottom: 10px;
      padding: 0 8px;
      
      background: #6666cc;
      border: 0;
  }
  
  
  .heading
  {
      background: #aaaaaa;
      border-bottom: 1px solid #000000;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>This is IE7 only code at the moment stripped down to show off this problem. View it in IE7 mode.
  &lt;br /&gt;
  
  &lt;div class="block"&gt;
      &lt;div class="heading"&gt;Aenean vulputate&lt;/div&gt;
      
      Lorem ipsum dolor sit amet
      
      &lt;div class="thing-with-margin"&gt;
          Ipsum dolor amet Lorem.
      &lt;/div&gt;
      
      &lt;input type="submit" class="button" value="Sign Up"&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>