我试图让我网站的页脚部分显示在页面上的主要内容下方，但是在我遇到问题让它出现在正确的位置后，我添加了一个背景颜色，所以我可以更好看看发生了什么。
我注意到它似乎缠绕着我useswrapper div的所有子div（由于某种原因忽略了它们上方的标题和水平规则）。
正如你在下面的代码中看到的那样，页脚部分是从这些div开始的几行，并且除了段落标记之外几乎没有任何其他内容，所以我不知道它正在做什么或为什么这样做？
我确实尝试寻找这个问题的答案，但我发现的所有内容似乎都是关于没有留在他们应该使用的div中的div，而这是两个不相关的div（除了是相同元素的孩子）之外没有明显的理由。
我的代码：
#wrapper {
text-align: center;
}
#useswrapper {
width: 80%;
margin: 0 auto;
}
.usesdiv {
width: 21%;
float: left;
padding-left: 25px;
padding-right: 25px;
}
header,
body {
text-align: center;
}
.usesimg {
width: 100%;
border-radius: 20px;
}
.navlist li {
display: inline;
margin: 0;
padding: 0;
}
.navlist li a {
text-decoration: none;
color: white;
padding-left: 0.3%;
padding-right: 0.3%;
}
.navlist {
margin-left: -3em;
padding: 3px;
}
#mainnav {
background: #B36868;
width: 80%;
text-align: center;
margin: 0 auto;
padding: 0;
border-radius: 1em;
}
hr {
width: 90%;
color: #B36868;
}
h1,
h2,
h3 {
color: #B36868;
font-family: 'Pacifico', cursive;
}
h3 {
font-size: 1.5em;
}
p,
a {
font-family: 'Old Standard TT', serif;
}
#purchasepane {
width: 40%;
margin: 0 auto;
background: #B36868;
border-radius: 15px;
padding-bottom: 1px;
border-style: solid;
border-width: 6px;
border-color: #A43737;
}
.boxtitle {
color: white;
margin-top: 0%;
}
#quantity {
color: white;
}
footer {
background: grey;
width: 80%;
text-align: center;
margin: 0 auto;
padding: 0;
border-radius: 1em;
}<html>
<head>
<title>The Goodwill Asbestos Corporation</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Old+Standard+TT' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="wrapper">
<header>
<img src="images/logo.jpg" id="logo">
<nav id="mainnav">
<ul class="navlist">
<li><a href="#">Cart</a>
</li>
<li><a href="#">Login</a>
</li>
<li><a href="#">Sign Up</a>
</li>
</ul>
</nav>
<div id="intro">
<p>Are you looking for a cheap alternative to artificial snow? Are you looking for a way to draw out your talcum powder supply? Perhaps you're in search of a safer cigarette filter?</p>
<p>Whatever your issue, The Goodwill Asbestos Corporation has you covered.</p>
</div>
</header>
<div id="purchasepane">
<h2 class="boxtitle">Purchase Now!</h2>
<form action="#">
<span id="quantity">Quantity (Kg):</span>
<input type='text' name="quant">
<input type="submit" value="Add to Cart">
</form>
</div>
<div id="useswrapper">
<h2>Uses of Asbestos</h2>
<hr>
<div id="snow" class="usesdiv">
<h3>Artificial Snow</h3>
<img src="images/snow.jpg" class="usesimg">
</div>
<div id="talc" class="usesdiv">
<h3>Talcum Enhancer</h3>
<img src="images/talc.jpg" class="usesimg">
</div>
<div id="filters" class="usesdiv">
<h3>Cigarette Filters</h3>
<img src="images/filters.jpg" class="usesimg">
</div>
<div id="dandruff" class="usesdiv" class="usesimg">
<h3>Prank Dandruff</h3>
<img src="images/dandruff.jpg" class="usesimg">
</div>
<div id="sweetner" class="usesdiv" class="usesimg">
<h3>Beverage Sweetner</h3>
<img src="images/sweetner.jpg" class="usesimg">
</div>
<div id="toothpaste" class="usesdiv">
<h3>Toothpaste Texture</h3>
<img src="images/toothpaste.jpg" class="usesimg">
</div>
<div id="toy" class="usesdiv">
<h3>Childrens Toy</h3>
<img src="images/toy.jpg" class="usesimg">
</div>
<div id="sinus" class="usesdiv">
<h3>Sinus Cleaner</h3>
<img src="images/sinus.jpg" class="usesimg">
</div>
</div>
<footer>
<p>Copyright 2016</p>
</footer>
</div>
</body>
</html>
答案 0 :(得分：0)
将overflow: auto添加到#useswrapper。
您的浮动元素需要clearfix解决方案。
#useswrapper div的子元素被浮动，因此从文档流中删除。你的孩子有这个代码：
.usesdiv { float: left; }
从文档流中删除元素时，父容器不知道它存在，并且没有创建高度来容纳子项。然后，页脚将自己定位在该框的正下方，高度低于预期。
要进行说明，请在原始代码中添加边框：
#useswrapper { border: 1px solid red; }
然后添加clearfix：
#useswrapper { overflow: auto; }
Clearfix方法可用于强制父级识别浮动子级。一种这样的方法是overflow: auto。 There are many others.
此处有更多详情：How Floats are Positioned（MDN）
答案 1 :(得分：0)
当您对页脚上方的元素使用float: left时，您需要在页脚的CSS中使用clear: both;。这样可以防止浮动元素绕过你的页脚。
答案 2 :(得分：-1)
问题似乎是#useswrapper不包含其子div元素。 我不知道原因是什么，但修复是将类has-content添加到#useswrapper并定义了has-content：
.has-content::after, .has-content::before
{
content: " ";
display: table;
}
.has-content::after {
clear: both;
}
#wrapper {
text-align: center;
}
#useswrapper {
width: 80%;
margin:0 auto;
}
.usesdiv {
width:21%;
float:left;
padding-left: 25px;
padding-right:25px;
}
header, body {
text-align: center;
}
.usesimg {
width: 100%;
border-radius: 20px;
}
.navlist li {
display: inline;
margin: 0;
padding: 0;
}
.navlist li a {
text-decoration: none;
color: white;
padding-left: 0.3%;
padding-right: 0.3%;
}
.navlist {
margin-left: -3em;
padding:3px;
}
#mainnav {
background: #B36868;
width: 80%;
text-align: center;
margin: 0 auto;
padding: 0;
border-radius: 1em;
}
hr {
width: 90%;
color:#B36868;
}
h1, h2, h3 {
color: #B36868;
font-family: 'Pacifico', cursive;
}
h3 {
font-size: 1.5em;
}
p, a {
font-family: 'Old Standard TT', serif;
}
#purchasepane {
width:40%;
margin: 0 auto;
background:#B36868;
border-radius: 15px;
padding-bottom: 1px;
border-style: solid;
border-width: 6px;
border-color: #A43737;
}
.boxtitle {
color: white;
margin-top: 0%;
}
#quantity {
color:white;
}
footer {
background: grey;
width: 80%;
text-align: center;
margin: 0 auto;
padding: 0;
border-radius: 1em;
}
.has-content::after, .has-content::before
{
content: " ";
display: table;
}
.has-content::after {
clear: both;
}<html>
<head>
<title>The Goodwill Asbestos Corporation</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Old+Standard+TT' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="wrapper">
<header>
<img src="images/logo.jpg" id="logo">
<nav id="mainnav">
<ul class="navlist">
<li><a href="#">Cart</a></li>
<li><a href="#">Login</a></li>
<li><a href="#">Sign Up</a></li>
</ul>
</nav>
<div id="intro">
<p>Are you looking for a cheap alternative to artificial snow? Are you looking for a way to draw out your talcum powder supply? Perhaps you're in search of a safer cigarette filter?</p>
<p>Whatever your issue, The Goodwill Asbestos Corporation has you covered.</p>
</div>
</header>
<div id="purchasepane">
<h2 class="boxtitle">Purchase Now!</h2>
<form action="#">
<span id="quantity">Quantity (Kg):</span> <input type='text' name="quant">
<input type="submit" value="Add to Cart">
</form>
</div>
<div id="useswrapper" class="has-content">
<h2>Uses of Asbestos</h2>
<hr>
<div id="snow" class="usesdiv">
<h3>Artificial Snow</h3>
<img src="images/snow.jpg" class="usesimg">
</div>
<div id="talc" class="usesdiv">
<h3>Talcum Enhancer</h3>
<img src="images/talc.jpg" class="usesimg">
</div>
<div id="filters" class="usesdiv">
<h3>Cigarette Filters</h3>
<img src="images/filters.jpg" class="usesimg">
</div>
<div id="dandruff" class="usesdiv" class="usesimg">
<h3>Prank Dandruff</h3>
<img src="images/dandruff.jpg" class="usesimg">
</div>
<div id="sweetner" class="usesdiv" class="usesimg">
<h3>Beverage Sweetner</h3>
<img src="images/sweetner.jpg" class="usesimg">
</div>
<div id="toothpaste" class="usesdiv">
<h3>Toothpaste Texture</h3>
<img src="images/toothpaste.jpg" class="usesimg">
</div>
<div id="toy" class="usesdiv">
<h3>Childrens Toy</h3>
<img src="images/toy.jpg" class="usesimg">
</div>
<div id="sinus" class="usesdiv">
<h3>Sinus Cleaner</h3>
<img src="images/sinus.jpg" class="usesimg">
</div>
</div>
<footer>
<p>Copyright 2016</p>
</footer>
</div>
</body>
</html>