我已经看到很多文章将两个元素放在一行中。我的问题恰恰相反！正如您在代码中看到的那样，有五个框和一个旁边的段落，应改为在框下方。有人可以告诉我如何解决此问题吗？我现在正在学习HTML / CSS，在继续学习之前，我想在这里进行此工作而无需使用grid / flex。
HTML：
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width-device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav>
<div id="navigation">
<div class="wrapper">
<div id="logo"></div>
<div id="menu">
<a href="#">Home</a>
<a href="#">About Us</a>
<a href="#">Contact</a>
<a href="#">Imprint</a>
</div>
</div>
</div>
</nav>
<div id="main">
<div class="wrapper">
<div id="top-boxes">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
</div>
</body>
</html>
CSS：
*
{
margin: 0;
padding: 0;
text-decoration: none;
}
.wrapper
{
margin: 0 auto;
width: 70%;
}
/* Navigation */
#navigation
{
width: 100%;
height: 5em;
background-color: darkgrey;
position: fixed;
top: 0;
}
#logo
{
margin: 1em;
width: 2.5em;
height: 2.5em;
background-size: 2.5em 2.5em;
background-image: url("rocket.png");
float: left;
}
#menu
{
margin-top: 2em;
margin-right: 1em;
float: right;
}
#menu a
{
color: #fff;
font-family: sans-serif;
font-style: normal;
font-weight: 100;
}
/* Inhalt */
#main p
{
margin: auto;
margin-top: 7em;
}
.box
{
width: 5em;
height: 5em;
padding: 1em;
margin: 1em;
background-color: gray;
float: left;
display: block;
}
这是codepen链接：
https://codepen.io/andy4117/pen/KKpXEwJ
谢谢你！
.box
{
width: 5em;
height: 5em;
padding: 1em;
margin: 1em;
background-color: gray;
/* float: left; */
display: inline-block;/* instead of block */
}
编辑
如果出于某些原因要使用float，虽然可以将float添加到＃top-boxes元素的add float：left中，但不建议这样做。
#top-boxes{float:left}
从导航中移除固定位置，然后在框上移除浮动并进行display：inline block。直播example
#navigation{
width: 100%;
height: 5em;
background-color: darkgrey;
top: 0;
}
.box{
width: 5em;
height: 5em;
padding: 1em;
margin: 1em;
background-color: gray;
display: inline-block;
}