这一系列文章将主要提及一下这两个月以来的学习过程中，在CSS和JS上遇到过的坑，并尝试说明解决办法以及出现这些坑的原因
第一个坑：消除浮动，clear的使用
刚制作完成简历初版的时候，也就是在刚刚学习了CSS的那段时间，完成了初版的我，看着PC端上的学习成果，满心欢喜地用手机打开了它，结果发现，userCard里面的description list出现了严重的BUG，具体情况如下面两张图所示：
PC端.png
手机端.jpg
可以看到，手机端的描述列表中，出现了严重的错位现象，而在PC端上并没有这种现象发生，因此我对这块区域的代码进行了缜密地排查，最后得出自己的推断，可能是浮动方面出了问题！代码中，我对描述列表内的dt标签以及dd标签进行了左浮动和右浮动的操作，并对这两个标签分别设置了30%的宽度和70%的宽度，因此当时我认为父级容器的宽度理应会被这两个标签所占满，而PC端最后的表现也的确如此，可偏偏手机端就是出现了BUG，在我百思不得其解之时，我像方应航老师请教了这个问题，老师并没有直接告诉我答案，他让我在dt标签和dd标签的CSS样式下加入一下两行代码，然后自己去发现问题：
border:2px red solid;
box-sizing: border-box;
PC端加入border后.png
手机端加入border后.jpg
很明显能看出来，在手机端上，dt标签的border高度明显要比dd标签的border高度要高，而PC端上则没有出现这种情况，这可以看出，PC端和手机端存在着字体的差异，于是乎我在电脑中把dt标签的字体调大后，发现PC端的确也发生了手机端的BUG，于是乎可以断定，这种字体差异是导致出现这个BUG的元凶之一。
当然，字体差异不可能是出现BUG的全部原因，一定有其他因素导致在发生字体差异之后引起排版格式的混乱，这时让我想起了学过的知识中曾经这样提过，在元素float之后要在其父元素的after伪元素上添加clearfix，这与我的问题是相关联的，于是乎我尝试着地在dt标签中加入了以下代码：
clear:both;，惊人地发现，问题被解决了。虽然问题被解决了，但是我并不知道具体的原理是什么，于是乎我查阅了相关的资料，很多资料上解释clear的作用是“消除浮动”“清除之前的样式”，这些描述并不能让我很好地理解清除clear的作用，直到后面我看到一篇文章，他用简朴的语言十分详细地表达了clear的作用：准确理解CSS clear:left/right的含义及实际用途。
这篇文章让我明白了clear其实是作用在自身元素上的，而不是作用在浮动元素上的，它的作用如文章所说，clear的作用是“抗浮动”，clear属性是让自身不能和前面的浮动元素相邻，注意这里“前面的”3个字，因此若前面为浮动元素，通过使用clear，就可以使得自身元素落下。
正如我简历中的问题一样，由于字体大小的差异，导致dt标签内的字体高度超出了dd标签的字体高度，这导致了dt标签的字体有着“占据两行”一般的效果，也就是说，左边的dt标签“年龄”的左浮对应了右边两个标签的右浮，而我们本来的想法是应该一一对应，因此我们需要对dt标签进行左浮动的消除，使得每一个dt标签都能另起一行来达到一一对应的目的，当然，用
clear:both;也是可以的，因为当clear:left;有效的时候，clear:right;必定无效，也就是此时clear:left;等同于设置clear:both;。
至此，关于这个坑的描述，产生原因，以及解决办法和原理都大致介绍完了，虽然这篇文章言语上存在着些许混乱，但希望能对遇到同样问题并看到这篇文章的人产生一点帮助~
另外，想在这里感叹一句，border大法来处理CSS问题就是爽吖~
网友评论