学习制作双飞翼布局遇到footer背景浮动问题

最新推荐文章于 2025-12-21 22:09:29 发布

原创最新推荐文章于 2025-12-21 22:09:29 发布 · 216 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

学习制作双飞翼布局遇到footer背景浮动问题

代码如下：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的攻略小站</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div id="container">
        <header class="header">
            header
        </header>
        <article class="wrapper">
        <section class="main">
                <div class="main-wrapper">
                main
                </div>
        </section>
            <aside class="left">
            left
            </aside>
            <aside class="right">
            right
            </aside>
        </article>
        <footer class="footer">
        footer
        </footer>
    </div>
</body>
</html>

CSS如下：

body{
    margin:0px;
    padding:0px;
}
#container{
    margin: 0 auto;
}
#container .header{
    border:1px solid red;
    border-radius: 2em;
    background: yellow;
    width: 100%;
    height: 30px;
}
#container .wrapper{
    overfloat: hidden;
    min-width: 300px;
    margin:10px 0;
}
#container .main{
    width: 100%;
    float: left;
}
#container .main-wrapper{
    border: 1px solid red;
    height: 600px;
    margin:0 200px;
}
#container aside{
    float: left;
    width: 100px;
    height: 300px;
    background: blue;
}
#container .left{
    margin-left: -100%;
}
#container .right{
    margin-left:-190px;
}
#container .footer{
    border: 1px solid blue;
    background:#ccc;
    width: 100%;
    height: 80px;
    border-radius: 2em;
}

效果图如下：
灰色背景既然浮动了，已知是跟着aside浮动，但是没搞明白怎么回事！