發(fā)現(xiàn)了問題就需要解決問題,因此我就拿這個首字下沉的時候為什么要清除浮動而做了一系列的測試,結(jié)果讓我感覺有點崩潰,原來我在那章節(jié)中說明的內(nèi)容太少了,在這里趕緊做個補充,希望讀者朋友們能看到這篇文章后不會再對那個清除浮動而產(chǎn)生迷惑。
首先來看一下我在書中僅有的一段對首字下沉進行說明的代碼。
p:first-letter {float:left; /* 設(shè)置段落p標簽的首字為浮動,讓其占據(jù)多行的空間 */font-weight:bold; /* 加粗段落p標簽的首字 */font-size:2em; /* 設(shè)置段落p標簽的首字為其他字體的2倍 */}p {clear:both;} /* 清除首字的浮動,避免影響p標簽的高度與其相疊加 */ 【端午節(jié)由來】
關(guān)于端午節(jié)的來歷,歸納起來,大致有以下諸說:
迎濤神,此說出自東漢《曹娥碑》。曹娥是東漢上虞人,父親溺于江中,數(shù)日不見尸體,當時孝女曹娥年僅十四歲,晝夜沿江號哭。過了十七天,在五月五日也投江,五日后抱出父尸。
春秋時吳國忠臣伍子胥含冤而死之后,化為濤神,世人哀而祭之,故有端午節(jié)。
在書中所提到的注釋里,僅對p標簽清除浮動做了一個簡單的說明,內(nèi)容如下:
p {clear:both;} /* 清除首字的浮動,避免影響p標簽的高度與其相疊加 */
就是因為這么一句話,讓小土豆這位讀者產(chǎn)生了猜想,為什么要清除浮動。在部分讀者眼中或許已經(jīng)比較清楚明白為什么要清除浮動,因為:first-letter偽對象有一個浮動的屬性。后來我想想,為什么這個有浮動屬性就要清除浮動,這個問題似乎需要說明一下。
問題的出現(xiàn),就需要去解決。因此我就從沒清除浮動到采用不同方式的清除浮動對這段代碼進行了簡單分析。
未對段落首字設(shè)置浮動時 
未設(shè)置浮動時的首字下沉
p:first-letter {font-weight:bold;font-size:2em;}
這時我們僅僅只是對段落中的第一個字符設(shè)置了加粗和2倍大小的文本,那么在示例圖中可以看到的效果就是文字放大了而已,并未首字進行下沉的處理。
顯然這不是我們所想要的效果,那么這個時候我們要做的就是對首字設(shè)置浮動,使其脫離正常的文檔流
新聞熱點
疑難解答