Question

我有一个非常简单的代码，但是以某种方式页脚显示在我的页面顶部。如您所见，我没有使用任何浮点数，包装器，网格或其他任何东西。您可以在此文本下找到代码。谁能帮助我弄清楚为什么会这样，以及如何防止将来再次发生呢？预先谢谢你！

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<style type="text/css">

body {
      margin:0px;
     }


main {
      margin: 1cm auto;
      width: 50%;
      padding: 1cm;
      border: 1px solid black;
     }


 nav {
     border: 1px solid black;
     }
</style>
</head>

<body>
<footer> Service Networking </footer>

<nav>
   <label>Name: <input type="text" name="name"> </label>
   <label>Surname: <input type="text" name="surname"> </label>
</nav>

<main>
   <h1> Welcome! </h1>
   <p> This is your first page </p>
</main>
</body>

</html>

Answer 1

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<style type="text/css">

body {
      margin:0px;
     }


main {
      margin: 1cm auto;
      width: 50%;
      padding: 1cm;
      border: 1px solid black;
     }


 nav {
     border: 1px solid black;
     }
</style>
</head>

<body>

<nav>
   <label>Name: <input type="text" name="name"> </label>
   <label>Surname: <input type="text" name="surname"> </label>
</nav>

<main>
   <h1> Welcome! </h1>
   <p> This is your first page </p>
</main>

 <footer> Service Networking </footer>
</body>


</html>

您在<footer>和nav之前使用main。

Answer 2

尝试将页脚标签放置在主要标签之后。

Answer 3

body {
      margin:0px;
     }


main {
      margin: 1cm auto;
      width: 50%;
      padding: 1cm;
      border: 1px solid black;
     }


 nav {
     border: 1px solid black;
     }

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
</head>

<body>

<nav>
   <label>Name: <input type="text" name="name"> </label>
   <label>Surname: <input type="text" name="surname"> </label>
</nav>

<main>
   <h1> Welcome! </h1>
   <p> This is your first page </p>
</main>
<footer> Service Networking </footer>
</body>

</html>

Answer 4

因为您将页脚标签放在nav标签和main标签之前。将其移到末尾。

body {
      margin:0px;
     }


main {
      margin: 1cm auto;
      width: 50%;
      padding: 1cm;
      border: 1px solid black;
     }


 nav {
     border: 1px solid black;
     }
     
    footer{
    border: 1px solid green;
    }

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">

</head>

<body>


<nav>
   <label>Name: <input type="text" name="name"> </label>
   <label>Surname: <input type="text" name="surname"> </label>
</nav>

<main>
   <h1> Welcome! </h1>
   <p> This is your first page </p>
</main>

<footer> Service Networking </footer>
</body>

</html>

Answer 5

由于您在<body>中的第一个元素是footer，因此HTML会逐行显示。

footer是HTML 5中引入的语义标记。语义元素只是具有含义的标记。

因此，您的footer标签是块级元素，因此具有属性 display:block。

类似地，如果您将header元素用作正文之前的最后一个元素，那么header内容也会显示在底部，因为它是一个语义标签（具有帮助浏览器和人类理解标签内部内容的含义的标签）

您可以具有多个页眉页脚节标记，直到它对浏览器和人类有意义为止。

演示：https://jsfiddle.net/akshaymhatre89/ekvgLxcy/11/

<header>
  <h1>Header</h1>
</header>
<hr>
<main>
  <section>
    <header>
      <h2>Section header</h2>
    </header>
    <article>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ex minima magnam 
    </article>
    <footer>
      <p>End of article</p>
    </footer>
  </section>
</main>
<hr>
<footer>
  &copy; Copyright :-)
</footer>

更多参考文章：

为什么页脚显示在页面顶部？

5 个答案: