圣杯布局float问题

圣杯布局中header和footer中设置了浮动后中间盒子为什么没有上浮

慕慕2280070 2017-08-03

源自：CSS网页布局基础 3-2 圣杯布局案例

77

收起

5回答

Miss路 2017-09-12 09:43:54

豆豆同学很聪明。你的解释是正确的。大家可以参考着理解。

慕田峪7213717 2017-09-11 21:23:48

我的理解是因为头部，中部，底部全设了浮动，所以全部脱离了标准文档流。因为footer不在标准文档流中，所以不会跑上去。

宝慕林3319090 2017-09-10 03:28:46

视频中，中间盒子 container的高度塌陷了高度为0，但上浮了，你按f12查看container的大小，就知道他的最高点在header的顶部。但是因为header是浮动元素，虽然脱离了常规流，仍会影响后面的元素的内容，导致内容从header元素下面开始。

怎么都被占用了呢 2017-08-04 10:42:07

这里是有两种方法的哦，一种就是老师视频中设置的浮动，由于中间部分也都定义了浮动，所以header区域的浮动不会对中间部分造成影响。第二种是头部和底部都不用设置浮动，只给中间部分设就可以了。

慕田峪7213717 #1

如果头部底部不设浮动，中间设浮动的话container会塌陷，底部就会上去了。或者头部底部不设浮动的话，就要在container内加overflow:hidden消除浮动，才不会塌陷。

2017-09-11 21:20:12

小丸子爱吃菜 2017-08-03 15:59:20

圣杯布局的头部和底部不用设置浮动呀，为什么要这样写呢？圣杯布局的代码参考老师课程中的源码就可以了！

祝学习愉快！

提问者慕慕2280070 #1

老师视频中，这样设置了啊。而且是最开头，我记得.header,.footer {float:left；。。。。。}

2017-08-04 02:07:08
chriose #2

视频里面就是有header跟footer的浮动的、

2017-08-07 18:39:34
慕田峪7213717 #3

设了的，不然container就会塌陷。如果不设，就要在container内设overflow:hidden;否则就塌陷，底部跑上去

2017-09-11 21:21:42

相似问题

圣杯布局，左边宽度必须大于右边吗，如果左边宽度小于右边宽度，2X+Y还成立吗

老师，圣杯布局到底有什么优势呢

圣杯布局中的float和margin-left

关于圣杯布局和多列布局的差异问题？

关于圣杯布局和双飞翼布局如何让页面两边留白

登录后可查看更多问答，登录/注册

前端小白入门系列课程

参与学习人
提交作业 11218 份
解答问题 36713 个

从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！

本课精华内容

问答作业

为什么我的没有框

5 45

表格的问题

377 41

大家好,body前面有一个红色的小××，麻烦大家帮我看看

378 40

到底是cellspacing还是cellpacing?

0 35

课间活动的表格怎么实现，想了很久也想不出来

60 30

查看更多本课问答

请稍等 ...

意见反馈帮助中心 APP下载