啊啊啊!很多地方不明白,救救我

来源:10-7 CSS3 盒子模型

天窗的蚂蚁

2016-01-11 22:40

#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}的原因?怎么影响的?不好意思啊,问题有点多,麻烦大家了!



写回答 关注

3回答

  • 沐皓
    2016-10-28 07:41:40
    1. display:table;和#page:after{clear:both;}是为了清除 #page:after受到浮动的影响,#page:after不上浮,和before之间距离导致page不坍塌。 而如果不设置display:table;或者block     那#page:after是个行内元素就直接就上去了 

    2. footer的清除浮动是让footer自身不受浮动影响  其实这里去掉也没有影响 因为上面挡了个block上不去

    共 1 条回复 >

  • fiona007
    2016-05-22 15:36:03

    1,display:block也是可以的,只要是块级元素都可以,用于清除page的浮动。

    2,个人觉得footer的clear:both是没有必要的。至于你说去掉以后page和footer的margin会消失,我没有出现这个问题,可能你的是其他地方出错,在检查一下。

    3,坍塌的问题,因为在page的后面加了一个块级元素用于清楚浮动就不会有这个问题了。

    fiona0...

    清除浮动这块建议你去查阅资料再了解一下

    2016-05-22 15:37:53

    共 1 条回复 >

  • 大拿009
    2016-01-13 11:13:38

    太复杂了。

    天窗的蚂蚁

    唉,苦逼啊!我是完全不懂啊!

    2016-01-14 19:46:10

    共 1 条回复 >

十天精通CSS3

本课程为CSS3入门教程,深刻详解CSS3知识让网页穿上绚丽装备

242555 学习 · 2623 问题

查看课程

相似问题