为了账号安全,请及时绑定邮箱和手机立即绑定

为什么footer会贴到header后面?整个main-div浮动起来了?

为什么footer会贴到header后面?整个main-div浮动起来了?

肖小波 2016-06-02 20:54:34
<!DOCTYPE html> <html>     <head>         <title>ceshi</title>         <style>         *{             margin: 0;             padding: 0;         }         #wrap{             width:1002px;             background:gray;         }         .header{             height: 120px;         }         .main{                          background: green;         }         .main .left{             width:700px;             height: 600px;             float: left;             background: black;         }         .main .right{             width:302px;             height: 600px;             float: left;             background: yellow;         }         .footer{             height: 120px;             background: blue;         }         </style>     </head>     <body>         <div id="wrap">             <div class="header"></div>             <div class="main">                 <div class="left"></div>                 <div class="right"></div>             </div>             <div class="footer"></div>         </div>     </body> </html>
查看完整描述

1 回答

已采纳
?
刚毅87

TA贡献345条经验 获得超309个赞

因为 maindiv 没有设置宽高,所以他的高度是由内容撑开的,而他里面两个 div 都设置浮动,脱离了文档流,不占空间,所以 maindiv 的高度默认为0,因此 footer 会贴着 header, 

实际上 main 就在他俩中间,只是没显示出来,给 main 设置个边框都可以看到效果

查看完整回答
2 反对 回复 2016-06-02
  • 1 回答
  • 0 关注
  • 1797 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信