下面是一个带有一些HTML的PHP文件。在while循环执行并使产品从左到右流动之后，我正试图将页脚固定在页面底部。
问题是，当DOM发生变化时，产品流也会发生变化，并且开始与页脚重叠，或者产品后面有空间。
有人能谈谈这个话题吗？非常感谢您的帮助。
PHP
<?php
DEFINE ("DB_USER", "root");
DEFINE ("DB_HOST", "localhost");
DEFINE ("DB_PASSWORD", "myroot");
DEFINE ("DB_NAME", "corporate");
$dbc = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME);
mysqli_set_charset($dbc, 'utf8');
$q = "SELECT sku, name, price FROM products";
$r = $dbc->query($q, MYSQLI_STORE_RESULT);
echo "<div class='wrapper'>";
echo "<header>header</header>";
while(list($sku, $name, $price) = $r->fetch_row())
printf("<div class='item'>(%s) <br>%s:<br>$%d</div>", $sku, $name, $price);
echo "<footer>footer</footer>";
echo "</div>";
?>
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
**CSS**
<style>
body{
margin: 0;
}
*, *:before, *:after{
box-sizing: border-box;
}
header{
width: 100%;
height: 200px;
background: blue;
padding: 100px;
color: white;
}
div.wrapper{
width: 100%;
height: auto;
margin: 0 auto;
text-align: center;
}
div.item{
display: flex;
width: 200px;
height: 300px;
background: blue;
color: white;
float: left;
margin: 10px;
margin-top: 10px;
border: 1px solid gold;
justify-content: center;
padding-top: 120px;
}
div.item:hover{
display: flex;
font-family: helvetica, sans-serif;
font-weight: 700;
width: 200px;
height: 300px;
background: darkblue;
color: gold;
float: left;
margin: 10px;
margin-top: 10px;
border: 1px solid gold;
cursor: pointer;
}
footer{
display: fixed;
width: 100%;
height: 200px;
color: white;
background: blue;
margin-top: 960px;
padding: 100px;
}
</style>
</head>
<body>
</body>
</html>
在.footer类中，用clear: left替换：margin-top: 960px;