CSS Drop caps：使用float：左边第一个字母覆盖第二个字母

Question

我遇到了丢帽和CSS问题。当我使用这段代码时：

.firstcharacter {
  color: #903;
  float: left;
  font-size: 4em;
  font-size: 400%;
  line-height: 80%;
  padding-top: 4px;
  padding-right: 8px;
  padding-left: 3px;
}

<h2>Hey.....</h2>
<p>
<span class="firstcharacter">A</span>s a new student of Luke Skywalker's Jedi Academy, follow an ancient tradition and learn the powers - and dangers - of the Force™.</p>

第二个字母由首字母大写字母覆盖。如果我取出浮动：左侧部分，它不会，但它不再看起来像下降帽，如果我添加一个不间断的空间，它可以工作，但第二个字母略微向右偏移。

使用float：

没有浮动：