课程
/前端开发
/HTML/CSS
/如何用CSS进行网页布局
为什么footer那里要写上clear:both清除浮动呢？如果不写的话，footer颜色块就会在head下面，这是什么原因呢？
2016-11-24
源自：如何用CSS进行网页布局 5-2
正在回答
首先你要理解文档流和浮动：
文档流：自上而下，从左到右。
浮动（两张纸叠放，最下面的是文档流，上面的是浮动元素的位面）：脱离文档流。
然后分析问题：
top元素的子元素head，高度100px，存在于文档流中
main元素的子元素left，right高度600px，浮动，脱离文档流
footer元素，高度100px，存在于文档流中。
文档流（底层）top元素后紧跟footer元素，并不受浮动元素影响，因为不在同一个位面。
前端coming 提问者
视频中main元素设置了高度,所以main元素浮动不影响foot;
而这个实践题中的main元素没有设置高度,所以里面的元素浮动会影响footer
视频中main相当于有骨头撑着foot,实践题中的main相当于没骨头,无法撑着footer,要footer自己处理
高山彝人
footer不清除浮动，会受影响的，也会有浮动效果
举报
用最简洁的案例教你布局的那些知识，这是前端工程师基本技能
