关于利用:first-letter实现首字下沉的一些看法

前几天在“CSS那些事儿”的群中，一位读者朋友（小土豆）问我书中提到首字下沉的时候为什么要增加一个清除浮动。当时我自己一时迷惑了，为什么呢，怎么一点印象都没有呢。赶紧打开电子版的《CSS那些事儿》找到相对应的章节，并且在各个浏览器中测试了之后才发现，我当初对这块的说明太少了，才让她产生了一些不理解的想法，或许也有其他的一些读者会存在这样的问题。

发现了问题就需要解决问题，因此我就拿这个首字下沉的时候为什么要清除浮动而做了一系列的测试，结果让我感觉有点崩溃，原来我在那章节中说明的内容太少了，在这里赶紧做个补充，希望读者朋友们能看到这篇文章后不会再对那个清除浮动而产生迷惑。

首先来看一下我在书中仅有的一段对首字下沉进行说明的代码。

<style type="text/css">
p:first-letter {
 float:left; /* 设置段落p标签的首字为浮动，让其占据多行的空间 */
 font-weight:bold; /* 加粗段落p标签的首字 */
 font-size:2em; /* 设置段落p标签的首字为其他字体的2倍 */
}
p {clear:both;} /* 清除首字的浮动，避免影响p标签的高度与其相叠加 */
</style>
 
<h2>【端午节由来】</h2>
<p>关于端午节的来历，归纳起来，大致有以下诸说：</p>
<p>迎涛神，此说出自东汉<span>《曹娥碑》</span>。曹娥是东汉上虞人，父亲溺于江中，数日不见尸体，当时孝女曹娥年仅十四岁，昼夜沿江号哭。过了十七天，在五月五日也投江，五日后抱出父尸。</p>
<p>春秋时吴国忠臣伍子胥含冤而死之后，化为涛神，世人哀而祭之，故有端午节。</p> 

在书中所提到的注释里，仅对p标签清除浮动做了一个简单的说明，内容如下：

p {clear:both;} /* 清除首字的浮动，避免影响p标签的高度与其相叠加 */

就是因为这么一句话，让小土豆这位读者产生了猜想，为什么要清除浮动。在部分读者眼中或许已经比较清楚明白为什么要清除浮动，因为:first-letter伪对象有一个浮动的属性。后来我想想，为什么这个有浮动属性就要清除浮动，这个问题似乎需要说明一下。

问题的出现，就需要去解决。因此我就从没清除浮动到采用不同方式的清除浮动对这段代码进行了简单分析。

未对段落首字设置浮动时

未设置浮动时的首字下沉

p:first-letter {font-weight:bold;font-size:2em;} 

这时我们仅仅只是对段落中的第一个字符设置了加粗和2倍大小的文本，那么在示例图中可以看到的效果就是文字放大了而已，并未首字进行下沉的处理。查看demo

显然这不是我们所想要的效果，那么这个时候我们要做的就是对首字设置浮动，使其脱离正常的文档流