                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /如何用CSS进行网页布局

这里为什么要清除浮动

这个代码中为什么要给footer写上clear:both;如果不写便不会显示其背景颜色。可看了这个布局发现footer这个div没看出来是受了那个div的浮动影响？

街角疯

2017-03-11

源自：如何用CSS进行网页布局 5-2

关注问题我要回答

826

操作

收起

3 回答

花森煜米
2017-06-14

1.原因：footer与head是文档流，而其他元素均设置了浮动，从而脱离了文档流，所以此处footer直接忽略其他浮动的元素好像不存在一样，直接就排在head后面去了。

2.解决：因此给footer元素设置了clear: both；清理浮动，使它们与footer一样排在head的后面。

3 回复有任何疑惑可以回复我~

收起回答

浪里白嫖张顺

我可能有点乱了，那main不是应该算作包裹层吗？这边的意思是只要父元素里的子元素产生了浮动就会被footer忽略吗？

2017-07-04 回复有任何疑惑可以回复我~

花森煜米回复浪里白嫖张顺

main是包裹层。此处设置了float属性的子元素均脱离文档流，所以会被是普通流的footer所忽略。

2017-07-04 回复有任何疑惑可以回复我~

qq_天天_66
2017-06-13

其实不写的话也会显示出来的，因为footer的宽度为100%,比main的要宽，只不过因为前面浮动造成main的自适应高度没在文本流中占位置，所以他其实会显示在紧贴tophead的下方

1 回复有任何疑惑可以回复我~

收起回答

jjj767
2017-03-11

为了使布局不受其他快元素受影响，让网页更加整齐，美观，

1 回复有任何疑惑可以回复我~

收起回答

0/150

提交

取消

如何用CSS进行网页布局

参与学习 209624 人
解答问题 1153 个

用最简洁的案例教你布局的那些知识，这是前端工程师基本技能

进入课程

这里为什么要清除浮动

我要回答关注问题

热搜

最近搜索清空

这里为什么要清除浮动

3 回答

这里为什么要清除浮动