????這一系列文章將主要提及一下這兩個(gè)月以來的學(xué)習(xí)過程中，在CSS和JS上遇到過的坑，并嘗試說明解決辦法以及出現(xiàn)這些坑的原因
第一個(gè)坑：消除浮動(dòng)，clear的使用
????剛制作完成簡(jiǎn)歷初版的時(shí)候，也就是在剛剛學(xué)習(xí)了CSS的那段時(shí)間，完成了初版的我，看著PC端上的學(xué)習(xí)成果，滿心歡喜地用手機(jī)打開了它，結(jié)果發(fā)現(xiàn)，userCard里面的description list出現(xiàn)了嚴(yán)重的BUG，具體情況如下面兩張圖所示：
????可以看到，手機(jī)端的描述列表中，出現(xiàn)了嚴(yán)重的錯(cuò)位現(xiàn)象，而在PC端上并沒有這種現(xiàn)象發(fā)生，因此我對(duì)這塊區(qū)域的代碼進(jìn)行了縝密地排查，最后得出自己的推斷，可能是浮動(dòng)方面出了問題！代碼中，我對(duì)描述列表內(nèi)的dt標(biāo)簽以及dd標(biāo)簽進(jìn)行了左浮動(dòng)和右浮動(dòng)的操作，并對(duì)這兩個(gè)標(biāo)簽分別設(shè)置了30%的寬度和70%的寬度，因此當(dāng)時(shí)我認(rèn)為父級(jí)容器的寬度理應(yīng)會(huì)被這兩個(gè)標(biāo)簽所占滿，而PC端最后的表現(xiàn)也的確如此，可偏偏手機(jī)端就是出現(xiàn)了BUG，在我百思不得其解之時(shí)，我像方應(yīng)杭老師請(qǐng)教了這個(gè)問題，老師并沒有直接告訴我答案，他讓我在dt標(biāo)簽和dd標(biāo)簽的CSS樣式下加入一下兩行代碼，然后自己去發(fā)現(xiàn)問題：
border:2px red solid;
box-sizing: border-box;
????很明顯能看出來，在手機(jī)端上，dt標(biāo)簽的border高度明顯要比dd標(biāo)簽的border高度要高，而PC端上則沒有出現(xiàn)這種情況，這可以看出，PC端和手機(jī)端存在著字體的差異，于是乎我在電腦中把dt標(biāo)簽的字體調(diào)大后，發(fā)現(xiàn)PC端的確也發(fā)生了手機(jī)端的BUG，于是乎可以斷定，這種字體差異是導(dǎo)致出現(xiàn)這個(gè)BUG的元兇之一。
????當(dāng)然，字體差異不可能是出現(xiàn)BUG的全部原因，一定有其他因素導(dǎo)致在發(fā)生字體差異之后引起排版格式的混亂，這時(shí)讓我想起了學(xué)過的知識(shí)中曾經(jīng)這樣提過，在元素float之后要在其父元素的after偽元素上添加clearfix，這與我的問題是相關(guān)聯(lián)的，于是乎我嘗試著地在dt標(biāo)簽中加入了以下代碼：
clear:both;，驚人地發(fā)現(xiàn)，問題被解決了。????雖然問題被解決了，但是我并不知道具體的原理是什么，于是乎我查閱了相關(guān)的資料，很多資料上解釋clear的作用是“消除浮動(dòng)”“清除之前的樣式”，這些描述并不能讓我很好地理解清除clear的作用，直到后面我看到一篇文章，他用簡(jiǎn)樸的語言十分詳細(xì)地表達(dá)了clear的作用：準(zhǔn)確理解CSS clear:left/right的含義及實(shí)際用途。
????這篇文章讓我明白了clear其實(shí)是作用在自身元素上的，而不是作用在浮動(dòng)元素上的，它的作用如文章所說，clear的作用是“抗浮動(dòng)”，clear屬性是讓自身不能和前面的浮動(dòng)元素相鄰，注意這里“前面的”3個(gè)字，因此若前面為浮動(dòng)元素，通過使用clear，就可以使得自身元素落下。
????正如我簡(jiǎn)歷中的問題一樣，由于字體大小的差異，導(dǎo)致dt標(biāo)簽內(nèi)的字體高度超出了dd標(biāo)簽的字體高度，這導(dǎo)致了dt標(biāo)簽的字體有著“占據(jù)兩行”一般的效果，也就是說，左邊的dt標(biāo)簽“年齡”的左浮對(duì)應(yīng)了右邊兩個(gè)標(biāo)簽的右浮，而我們本來的想法是應(yīng)該一一對(duì)應(yīng)，因此我們需要對(duì)dt標(biāo)簽進(jìn)行左浮動(dòng)的消除，使得每一個(gè)dt標(biāo)簽都能另起一行來達(dá)到一一對(duì)應(yīng)的目的，當(dāng)然，用
clear:both;也是可以的，因?yàn)楫?dāng)clear:left;有效的時(shí)候，clear:right;必定無效，也就是此時(shí)clear:left;等同于設(shè)置clear:both;。
????至此，關(guān)于這個(gè)坑的描述，產(chǎn)生原因，以及解決辦法和原理都大致介紹完了，雖然這篇文章言語上存在著些許混亂，但希望能對(duì)遇到同樣問題并看到這篇文章的人產(chǎn)生一點(diǎn)幫助~
????另外，想在這里感嘆一句，border大法來處理CSS問題就是爽吖~
