09/24
2015
刚才排了一个手机页面，完了之后发现页面底部总是有个间隙，审查元素也找不到是哪里来的，因为body和html标签内都没有包含这个间隙。后来一点点查找，发现是after伪类引起的。
在清除浮动时，我们经常会使用伪类，例如：
.clearfix:after{content:".";display:block;height:0; clear:both; visibility:hidden;}
虽然可以给after和before设置宽高为0，但是它仍然是占据空间的。如果加了这两个伪类的元素后面没有其他元素了，就会造成空隙。如果后面有其他元素，伪类占据的空间就会被后面的元素占掉，不会产生空隙。
请看以下代码：
<body>
<div id="a">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="b"></div>
<style>
body{margin: 0;padding: 0;background: #aaa;}
#a{height: 1000px;background: #fff;}
#a div{float: left;width: 25%;height: 100%;}
#a:after{content:".";display:block;height:0; clear:both; visibility:hidden;}
#b{height: 200px;background: #0c0;}
</style>
</body>
如果把元素b删掉，可以看到网页底部产生了空隙。不删除元素b的话，空隙就看不到了。
要解决空隙的问题，也很简单，给清除浮动的元素加上overflow: hidden;就行了。
