發現了問題就需要解決問題，因此我就拿這個首字下沉的時候為什么要清除浮動而做了一系列的測試，結果讓我感覺有點崩潰，原來我在那章節中說明的內容太少了，在這里趕緊做個補充，希望讀者朋友們能看到這篇文章后不會再對那個清除浮動而產生迷惑。

首先來看一下我在書中僅有的一段對首字下沉進行說明的代碼。

p:first-letter {float:left; /* 設置段落p標簽的首字為浮動，讓其占據多行的空間 */font-weight:bold; /* 加粗段落p標簽的首字 */font-size:2em; /* 設置段落p標簽的首字為其他字體的2倍 */}p {clear:both;} /* 清除首字的浮動，避免影響p標簽的高度與其相疊加 */ 
【端午節由來】
關于端午節的來歷，歸納起來，大致有以下諸說：
迎濤神，此說出自東漢《曹娥碑》。曹娥是東漢上虞人，父親溺于江中，數日不見尸體，當時孝女曹娥年僅十四歲，晝夜沿江號哭。過了十七天，在五月五日也投江，五日后抱出父尸。
春秋時吳國忠臣伍子胥含冤而死之后，化為濤神，世人哀而祭之，故有端午節。

在書中所提到的注釋里，僅對p標簽清除浮動做了一個簡單的說明，內容如下：

p {clear:both;} /* 清除首字的浮動，避免影響p標簽的高度與其相疊加 */

就是因為這么一句話，讓小土豆這位讀者產生了猜想，為什么要清除浮動。在部分讀者眼中或許已經比較清楚明白為什么要清除浮動，因為:first-letter偽對象有一個浮動的屬性。后來我想想，為什么這個有浮動屬性就要清除浮動，這個問題似乎需要說明一下。

問題的出現，就需要去解決。因此我就從沒清除浮動到采用不同方式的清除浮動對這段代碼進行了簡單分析。

未設置浮動時的首字下沉

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

這時我們僅僅只是對段落中的第一個字符設置了加粗和2倍大小的文本，那么在示例圖中可以看到的效果就是文字放大了而已，并未首字進行下沉的處理。
顯然這不是我們所想要的效果，那么這個時候我們要做的就是對首字設置浮動，使其脫離正常的文檔流

設置浮動未增加清除浮動

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

增加了浮動之后，我們可以看到FF/IE7/IE6中已經得到了我們所想要的效果，但是opera/safari中卻出現問題了，在文本內容少的時候，第二個p標簽中的文字因為浮動而跑上去了，而只有當文本出現兩行的時候才會將下一個p標簽的內容移開。
由此可見，清除浮動的必要性還是有的。那么我們就增加一個清除浮動的屬性給p標簽看看效果。

設置浮動后并增加清除浮動屬性

p標簽有了清除浮動的屬性后，這個時候opera/safari也不再發神經式的把下一個p標簽給拉上來了，不過仔細看看似乎間距存在著問題，難道還有其他因素導致了每個段落之間的間距消失了。

看來還是有些問題存在，是不是clear這個清除浮動的方式不對呢。難道是clear清除的僅僅只是浮動的屬性而并沒有讓上一個p標簽的高度自適應？帶著疑惑，增加點背景色的代碼給p標簽看看是不是真的這樣。

p:first-letter {float:left;font-weight:bold;font-size:2em;background-color:#000000;color:#FFFFFF;}p {clear:both;background-color:#FF0000;}

利用背景色檢查清除浮動后的效果

果然，p標簽的高度沒有下來，僅僅只是清除了浮動的屬性而已，清除浮動那么多的方式（具體可以參考《CSS那些事兒》中關于清除浮動的章節），這個clear不好使，那就換一個方式清除浮動。

p:first-letter {float:left;font-weight:bold;font-size:2em;background-color:#000000;color:#FFFFFF;}p {overflow:hidden;background-color:#FF0000;}

overflow方式清除浮動

瀏覽器的世界就是那么神奇，一個方法不行，換一個方法就會看到世界的另一面。這個時候我們可以看到背景色擴充到了整個p標簽，并且每個段落之間也存在了間距了，看來問題是解決了。

在這里需要說的一點就是，overflow清除浮動的方式彪叔——梁