我在学习HTML/CSS/PHP并在业余时间从头开始构建网站。
除非我使用 content <div>，否则以下代码中的页脚将保留在底部我想要的位置, 然后它射向内容的右侧。
我不明白为什么？!我已经注释掉了 float: left这没有什么区别。
感谢您的帮助。
style.css:
html {
font-family: sans-serif;
}
.wrap {
min-width: 600px;
width: 85%;
margin: auto;
float: left;
}
.navigation {
padding: 5px;
background: black;
text-align: center;
}
.navigation li {
display: inline;
padding-right: 10px;
}
.navigation a {
text-decoration: none;
color: white;
font-size: 20;
font-family: fantasy;
}
.navigation a:hover {
text-decoration: underline;
}
.content {
background: #f8f8f8;
float: left;
width: 80%;
}
header {
text-align: center;
margin: auto;
}
header a {
text-decoration: none;
color: black;
}
h5 {
font-size: 120px;
font-family: cursive;
font-variant: small-caps;
margin-top: 10px;
margin-bottom: -100px;
text-shadow: 2px 1px 3px gray;
}
h6 {
font-size: 32px;
}
p {
padding-bottom: 10px;
}
header.php:
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="/css/style.css">
<title></title>
</head>
<body>
<div class="wrap">
<header>
<a href="/index.php"><img src = "/images/banner_logo.jpg"></a>
</header>
<div class="navigation">
<ul>
<li><a href="/index.php">Home</a></li>
<!--<li><a href="/blog/index.php">Blog</a></li>-->
<li><a href="/pics/index.PHP">Pics</a></li>
<li><a href="/contact/index.php">Contact</a></li>
<li><a href="/about/index.php">About</a></li>
<li><a href="/produce/index.php">Produce</a></li>
</ul>
</div>
页脚.php:
<!--begin footer -->
<br><small>Copyright 2015</small>
</div>
</body>
</html>
index.php(含内容):
<?php include "header.php"; ?>
<!--begin page content-->
<h2>Welcome</h2>
<div class="content">
<p>Wander around and see if I've figured out what to do here.</p>
<h4>Would you like to tell me you are here?</h4>
<form action="process.php" method="post">
First Name: <input name="fname" type="text" />
<input type="submit" />
</form>
</div>
<br>
最佳答案
您需要对页脚进行清理，因为您的 .content元素是 float 的。简单的方法是用有意义的标签(例如 <footer>)包裹页脚内容，然后赋予这种样式
footer {
clear: both;
}
更好的改进方法是使用 .clearfix类 as used in the html5 boilerplate直接应用于 .content元素，例如
.content:before,
.content:after {
content: " ";
display: table;
}
.content:after {
clear: both;
}
关于php - 页脚保持在 <div> 的右侧，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28030126/