title: CSS: clean solution to the margin collapse issue when floating an element
body: <p>Example HTML+CSS:</p>
  
  <pre><code>&lt;html&gt;
    &lt;body style="padding: 0; margin: 0;"&gt;
      &lt;div style="float: right;"&gt;first&lt;/div&gt;
      &lt;div style="margin-top: 2em;"&gt;second&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Desired behavior:</strong> the <code>first</code> div floats to the top-right of the window.  <strong>Actual behavior:</strong> it floats 2em below the desired position.  <strong>Reason:</strong> <a href="http://www.howtocreate.co.uk/tutorials/css/margincollapsing" rel="noreferrer">margin collapsing</a>.</p>
  
  <p>Despite identifying the problem, the solutions I can come up with feel like hacks:</p>
  
  <ul>
  <li>change <code>body</code> style to  <code>margin: -1px 0 0 0; border-top: 1px solid;</code>.</li>
  <li>insert <code>&lt;div style="height: 1px; margin-bottom: -1px;"&gt;&lt;/div&gt;</code> before <code>first</code></li>
  <li>insert the above <code>&lt;div&gt;</code> between the <code>first</code> and <code>second</code></li>
  </ul>
  
  <p><strong>Is there a clean, idiomatic way of avoiding this issue?</strong></p>