Question

所以我现在正在网站上工作，所有内容都围绕页面排列。 css看起来像这样：

section {
    position: static;
    bottom: 110px;
}

#topLeft, #topRight, #bottomLeft, #bottomRight, #below {
    background-color: white;
    padding-left: 10px;
    padding-right: 10px;
    box-shadow: rgba(0,0,0,0) 0px 2px 3px, inset rgba(0,0,0,0) 0px -1px 2px;
    border-radius: 20px;
    border: 1px solid #00BFFF;
}

#topLeft, #topRight {
    padding-top: 10px;
}

#topLeft {
    float: left;
    margin-top: 200px;
    width: 630px;
    height: 310px;
}

#topRight {
    float: right;
    margin-top: 200px;
    width: 300px;
    height: 630px;
}

#middle {
    clear: left;
    position: absolute;
    margin-top: 530px;
    margin-left: 330px;
    width: 320px;
    height: 310px;
}

#bottomLeft {
    clear: left;
    float: left;
    margin-top: 10px;
    width: 300px;
    height: 630px;
}

#bottomRight {
    clear: right;
    float: right;
    margin-top: 10px;
    width: 630px;
    height: 310px;
}
img {
    border-radius: 20px;
}

#topRight img {
    margin-top: 25px;
}

#bottomLeft img {
    margin-top: 20px;
}

页脚低于此值，其css看起来像这样：

footer {
    clear: left;
    /*position: relative;*/
    bottom: 0px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    padding-top: 40px;
    height: 110px;
    font: normal 12px 'Helvetica', sans-serif;
    color: white;
    text-align: center;
}

我想在其他框下方添加一个新框，但在页脚上方。它的CSS看起来像这样：

#below {
    clear: both;
    position: absolute;
    float: left;
    margin-top: 1170px;
    width: 960px;
}

问题是这个盒子与页脚重叠！我只是无法解决如何解决这个问题，任何想法？

Answer 1

#below { clear:both }

应该足够了

如何阻止内容重叠页脚？

1 个答案: