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/

來源

2016-05-17 TheDetailer

請提供的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! */ 
}

來源

2016-05-17 20:08:57 Darek

謝謝！我猜測清除標籤會覆蓋浮動的效果？ – TheDetailer

基本上它使元素在它之前的浮動元素下被推下。換句話說：*「clear屬性指定元素浮動元素的哪些邊不允許浮動」*。在這種情況下，我們使用'both'值;你也可以只指定一邊：「左」或「右」。 – Darek

您正在使用浮動元素，這會導致元素在浮動元素之後流動。

這裏是一個很好的解釋

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

您可通過添加解決這個問題「明確：既」到#footer的

#footer { 
 
    clear:both; 
 
}

來源

2016-05-17 20:35:24 DottedT

HTML頁腳重疊在中心內容

回答

相關問題