HTML页脚重叠在中心内容

问题描述：

我正在设计一个主页模板。当我完成我的中心内容时，我开始制作页脚。我很快意识到我的页脚不在页面的底部，而是在中心内容中，并且无法找出原因。HTML页脚重叠在中心内容

HTML：

<!DOCTYPE html> 
<head> 
    <meta charset="utf-8" /> 
    <link rel="stylesheet" type="text/css" href="file://C:/Workspace/MyWeblogicWorkspace/Purify/WebContent/CSS/index.css"> 
    <link href='https://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'> 
</head> 
<body> 
    <div id="header"> 
     <div id="navigationBar"> 
      <ul id="navigationBarList"> 
       <li><a id="test" href="http://www.google.com">Home</a></li> 
       <li><a href="http://www.google.com">About</a></li> 
       <li><a href="http://www.google.com">Services</a></li> 
       <li><a href="http://www.google.com">Contact</a></li> 
      </ul> 
     </div><!-- end of navigationBar --> 
    </div><!-- end of header --> 
    <div id="center"> 
     <p id="title">*******************</p> 
     <p id="slogan">*******************</p> 

     <div id="centerContent"> 
      <div id="contentOneBox"> 
       <p id="contentOneTitle">*******************</p> 
       <p id="contentOneText">*******************!</p> 
      </div><!-- end of contentOneBox --> 
      <div id="contentTwoBox"> 
       <p id="contentTwoTitle">*******************</p> 
       <p id="contentTwoText">**************************************.</p> 
      </div><!-- end of contentTwoBox --> 
      <div id="contentThreeBox"> 
       <p id="contentThreeTitle">*******************</p> 
       <p id="contentThreeText">**************************************.</p> 
      </div><!-- end of contentThreeBox --> 
      <div id="contentFourBox"> 
       <p id="contentFourTitle">*******************</p> 
       <p id="contentFourText">**************************************.</p> 
      </div><!-- end of contentFourBox --> 
     </div><!-- end of centerContent --> 
    </div><!-- end of center --> 
    <div id="footer"> 
     <p id="contact">*******************</p> 
     <p id="copyright">*******************</p> 
    </div><!-- end of footer --> 
</body> 
</html>

CSS：

* { 
    padding: 0; 
    margin: 0; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

body { 
    font-size: 62.5%; 
    font-family: 'PT Sans', sans-serif; 
    color: #221F51; 
} 

#header { 
    display: block; 
    position: relative; 
    top: 0; 
    right: 0; 
    left: 0; 
    z-index: 9999; 
    margin: 0; 
    width: 100%; 
    min-width: 1024px; 
    height: 48px; 
    max-height: 44px; 
    background: #333; 
    background: rgba(0,0,0,0.8); 
    font-size: 18px; 
    -webkit-user-select: none; 
} 

#navigationBar { 
    display: block; 
    margin: 0 auto; 
    padding: 0 auto; 
    position: relative; 
    text-align: center; 
} 

#navigationBar ul li { 
    display: inline-block; 
    margin: 0 auto; 
    padding: 10px; 
    padding-left: 20px; 
    padding-right: 20px; 
} 

#navigationBar ul li a { 
    color: white; 
    margin: 0 auto; 
    padding: 0 auto; 
    text-decoration: none; 
} 

#navigationBar ul li a:hover { 
    color: gray; 
} 

#center { 
    display: block; 
    font-size: 18px; 
    position: relative; 
} 

#title { 
    display: block; 
    font-size: 48px; 
    letter-spacing: 3px; 
    margin-top: 25px; 
    padding: 25px; 
    position: relative; 
    text-align: center; 
} 

#slogan { 
    display: block; 
    font-size: 22px; 
    margin: 0 auto; 
    padding: 0 auto; 
    position: relative; 
    text-align: center; 
} 

#centerContent { 
    display: block; 
    font-size: 22px; 
    margin: 0 auto; 
    padding: 0 auto; 
    position: relative; 
    width: 990px; 
} 

#contentOneBox { 
    border: 1px solid black; 
    border-radius: 15px; 
    display: block; 
    float: left; 
    margin: 50px; 
    padding: 0px; 
    position: relative; 
    width: 350px; 
} 

#contentOneTitle { 
    background: #333; 
    background: rgba(0,0,0,0.8); 
    border-top-left-radius: 15px; 
    border-top-right-radius: 15px; 
    color: white; 
    display: block; 
    letter-spacing: 2px;  
    margin: 0; 
    padding: 2px; 
    position: relative; 
    text-align: center; 
} 

#contentOneText { 
    border-bottom-left-radius: 15px; 
    border-bottom-right-radius: 15px; 
    display: block; 
    height: 97px; 
    padding: 5px; 
    position: relative; 
    text-align: center; 
} 

#contentTwoBox { 
    border: 1px solid black; 
    border-radius: 15px; 
    display: block; 
    float: right; 
    margin: 50px; 
    padding: 0px; 
    position: relative; 
    width: 350px; 
} 

#contentTwoTitle { 
    background: #333; 
    background: rgba(0,0,0,0.8); 
    border-top-left-radius: 15px; 
    border-top-right-radius: 15px; 
    color: white; 
    display: block; 
    letter-spacing: 2px;  
    margin: 0; 
    padding: 2px; 
    position: relative; 
    text-align: center; 
} 

#contentTwoText { 
    border-bottom-left-radius: 15px; 
    border-bottom-right-radius: 15px; 
    display: block; 
    height: 97px; 
    padding: 5px; 
    position: relative; 
    text-align: center; 
} 

#contentThreeBox { 
    border: 1px solid black; 
    border-radius: 15px; 
    display: block; 
    float: left; 
    margin: 50px; 
    padding: 0px; 
    position: relative; 
    width: 350px; 
} 

#contentThreeTitle { 
    background: #333; 
    background: rgba(0,0,0,0.8); 
    border-top-left-radius: 15px; 
    border-top-right-radius: 15px; 
    color: white; 
    display: block; 
    letter-spacing: 2px;  
    margin: 0; 
    padding: 2px; 
    position: relative; 
    text-align: center; 
} 

#contentThreeText { 
    border-bottom-left-radius: 15px; 
    border-bottom-right-radius: 15px; 
    display: block; 
    height: 97px; 
    padding: 5px; 
    position: relative; 
    text-align: center; 
} 

#contentFourBox { 
    border: 1px solid black; 
    border-radius: 15px; 
    display: block; 
    float: right; 
    margin: 50px; 
    padding: 0px; 
    position: relative; 
    width: 350px; 
} 

#contentFourTitle { 
    background: #333; 
    background: rgba(0,0,0,0.8); 
    border-top-left-radius: 15px; 
    border-top-right-radius: 15px; 
    color: white; 
    display: block; 
    letter-spacing: 2px;  
    margin: 0; 
    padding: 2px; 
    position: relative; 
    text-align: center; 
} 

#contentFourText { 
    border-bottom-left-radius: 15px; 
    border-bottom-right-radius: 15px; 
    display: block; 
    height: 97px; 
    padding: 5px; 
    position: relative; 
    text-align: center; 
} 

#footer { 
    background-color: #f2f2f2; 
    display: block; 
    position: relative; 
    margin: 0; 
    width: 100%; 
    min-width: 1024px; 
    font-size: 14px; 
    -webkit-user-select: none; 
} 

#contact { 
    display: block; 
    position: relative; 
    text-align: center; 
} 

#copyright { 
    display: block; 
    position: relative; 
    text-align: center; 
}

这里的小提琴：https://jsfiddle.net/c74dy9dj/

请提供的jsfiddle –

答

尝试添加clear: both;到页脚CSS：

#footer { 
    background-color: #f2f2f2; 
    display: block; 
    position: relative; 
    margin: 0; 
    width: 100%; 
    min-width: 1024px; 
    font-size: 14px; 
    -webkit-user-select: none; 
    border: 1px gray dotted; 
    background-color: rgba(120,120,120,.5); 
    clear: both; /* <-- check this out! */ 
}

谢谢！我猜测清除标签会覆盖浮动的效果？ – TheDetailer

基本上它使元素在它之前的浮动元素下被推下。换句话说：*“clear属性指定元素浮动元素的哪些边不允许浮动”*。在这种情况下，我们使用'both'值;你也可以只指定一边：“左”或“右”。 – Darek

答

您正在使用浮动元素，这会导致元素在浮动元素之后流动。

这里是一个很好的解释

https://css-tricks.com/almanac/properties/c/clear/

您可通过添加解决这个问题 “明确：既” 到#footer的

#footer { 
 
    clear:both; 
 
}

HTML页脚重叠在中心内容

相关推荐