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

<!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>

肖小波

浏览 1860回答 1

1回答

刚毅87

因为 maindiv 没有设置宽高,所以他的高度是由内容撑开的,而他里面两个 div 都设置浮动,脱离了文档流,不占空间,所以 maindiv 的高度默认为0,因此 footer 会贴着 header, 实际上 main 就在他俩中间,只是没显示出来,给 main 设置个边框都可以看到效果

随时随地看视频慕课网APP