html - 我的 <main> 标签中的文本在我的 &lt;header&gt; 标签中，无法弄清楚如何在我的页眉和页脚之间获取它

Question

我正在尝试构建基本网站，但我遇到了主标记中的文本与 header 标记重叠的问题。我以前创建过其他简单的网页，但我从来没有遇到过这个问题，我认为 <main> 中的文本标签自动放在标题下方？我的印象是 HTML 页面是这样的:

Header
Main
Footer

.header-nav {
  float: right;
  list-style: none;
  margin-top: 10px;
}

.row {
  max-width: 1200px;
  margin: auto;
}

.header-nav li {
  display: inline-block;
}

.header-nav li a {
  color: black;
  text-decoration: none;
  padding: 25px;
  25px;
  font-family: "Verdana", sans-serif;
  font-size: 14px;
}

.header-nav li.active a {
  border: 1px solid white;
}

.header-nav li a:hover {
  border: 1px solid white;
}

.dota2icon img {
  width: 150px;
  height: auto;
  float: left;
}

.bodytext {
  font-family: "Verdana", sans-serif;
  width: 1200px;
  margin-left: 0px;
  margin-top: 0px;
}

h1 {
  color: black;
  text-transform: uppercase;
  font-size: 24px;
  text-align: left;
}

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #efefef;
  text-align: center;
}

<header>
  <!-- NAVIGATION BAR START -->

  <div class="dota2icon">
    <img src="dota2icon.png">
  </div>
  <div class="row">
    <ul class="header-nav">
      <li><a href="index.html">Home</a></li>
      <li><a href="categories.html">Categories</a></li>
      <li><a href="item.html">Services</a></li>
      <li><a href="myItems.html">Contact</a></li>
    </ul>
  </div>
  <!-- NAVIGATION BAR END -->
</header>


<main>
  <!-- DESCRIPTION -->
  <div class="bodytext">
    <h1>Dota 2 Guides</h1>
    <p>TEST TEST TEST TEST TEST </p>
  </div>

</main>



<div class="footer">

</div>

Answer 1

.header-nav 向右浮动，这意味着它后面的所有内容如果没有clear，就会在它旁边冒泡。

查看clear。或者看看不使用 float 进行布局(我们现在有 Flexbox 和 Grid)。