title: Float: left positions the first letter outside the text block on Chrome
body: <p>I have a CSS code to make my first Paragraph letter bigger in (Fairy tales books style). The problem is that on firefox it works perfect (2nd, 3rd and 4th lines start from the right side of the first letter, then text is written normally) but for some reason Chrome puts this first letter outside the whole paragraph (not only 4 lines).</p>
  
  <p><img src="https://i.stack.imgur.com/vSL5p.jpg" alt="Demo"></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.first {
    display: inline-block;
  }
  .first p:first-letter {
    float: left;
    font-size: 120px;
    margin: 0 10px 0px 0;
  }
  p:first-line {
    line-height: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="first"&gt;
    &lt;p&gt;TEXT&lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>