#page:after和#page:before在#page前面和后面插入一个空内容，为什么要把他们设置为display:table;？#page:after{clear:both;overflow: hidden;}，这里设置了clear:both，清楚浮动了，为什么#footer还要在设置一次clear:both呢？但如果我把#footer的clear:both去掉，他和#page(margin-bottom: 20px)之间的20px就没了？这里也不明白？由于#page里面的.main和.sidebar都浮动了，如果#page没有设置overflow:hidden，他就应该坍塌呀(我给#page加上背景色）,但是它并没有坍塌，是因为#page:after{overflow:hidden}的原因？怎么影响的？不好意思啊，问题有点多，麻烦大家了！
display:table;和#page:after{clear:both;}是为了清除 #page:after受到浮动的影响，#page:after不上浮，和before之间距离导致page不坍塌。 而如果不设置display:table;或者block 那#page:after是个行内元素就直接就上去了
footer的清除浮动是让footer自身不受浮动影响 其实这里去掉也没有影响 因为上面挡了个block上不去
1，display:block也是可以的，只要是块级元素都可以，用于清除page的浮动。
2，个人觉得footer的clear:both是没有必要的。至于你说去掉以后page和footer的margin会消失，我没有出现这个问题，可能你的是其他地方出错，在检查一下。
3，坍塌的问题，因为在page的后面加了一个块级元素用于清楚浮动就不会有这个问题了。
太复杂了。