title: Issue with Twitter Bootstrap clear float CSS — what am I doing wrong?
body: <p>As a part of learning CSS (&amp; practically applying it — by creating simple themes), today I wanted to know <a href="https://stackoverflow.com/questions/490184/what-is-the-best-way-to-clear-the-css-style-float/9766889">some proper ways</a> of clearing floats in CSS.</p>
  
  <p>I wanted to see how Twitter does it, so I downloaded Bootstrap, went through the bootstrap.css file, and found what I was looking for (I found two code blocks):</p>
  
  <pre><code>.clearfix {
      *zoom: 1;
  }
  .clearfix:before, .clearfix:after {
      display: table;
      content: "";
  }
  .clearfix:after {
      clear: both;
  }
  </code></pre>
  
  <p>&amp;</p>
  
  <pre><code>.container {
      margin-left: auto;
      margin-right: auto;
      *zoom: 1;
  }
  .container:before, .container:after {
      display: table;
      content: "";
  }
  .container:after {
      clear: both;
  }
  </code></pre>
  
  <p>I immediately tried it out, and that specific part of my code looked like so:</p>
  
  <pre><code>&lt;p class="sample-preview"&gt;
      &lt;span class="sample-preview"&gt;PREVIEW&lt;/span&gt;
      &lt;em&gt;This is italicized aka emphasized&lt;/em&gt;, and so is &lt;em&gt;this&lt;/em&gt;.&lt;br /&gt;
      &lt;strong&gt;This is bold aka strong emphasis&lt;/strong&gt;, and so is &lt;strong&gt;this&lt;/strong&gt;.&lt;br /&gt;
      Use &lt;strong&gt;&lt;em&gt;italics and bold together&lt;/em&gt;&lt;/strong&gt; if you &lt;strong&gt;&lt;em&gt;have to&lt;/em&gt;&lt;/strong&gt;.
  &lt;/p&gt;
  </code></pre>
  
  <p>+</p>
  
  <pre><code>p.sample-preview {
      border: 1px solid #FFCCC9;
      background: #FFEBE9;
      outline: 2px solid #FFEBE9;
      padding: 10px;
  }
  
  span.sample-preview {
      display: inline-block;
      float: right;
      margin:0;
      font-weight: bold;
      font-size: 12px;
      background: #FFCCC9;
      padding: 2px 5px;
  
  }
  
  .sample-preview {
      margin-left: auto;
      margin-right: auto;
      *zoom: 1;
  }
  .sample-preview:before, .sample-preview:after {
      display: table;
      content: "";
  }
  .sample-preview:after {
      clear: both;
  }
  </code></pre>
  
  <p>Although I am not entirely sure, I think this code is causing a weird bug on the page I tried it. Why do I think so? Everything seemed fine when I removed <code>display: table;</code> from the code using Firebug.</p>
  
  <p>You can take a look at the page <a href="http://groups.boygeek.in/markdown/index.html" rel="nofollow noreferrer">here</a> and the bug is — the first pink box is taller than the content. What am I doing wrong?</p>