HTML - 页脚将自身置于容器之上

Question

我正在创建一个小网页来练习我的HTML，我似乎无法弄清楚为什么Footer只是将自己放在Header下面而不是我创建的容器下面。

这很可能是我忽略的小事，但我似乎无法弄清楚或在任何地方找到解决方案，所以这里的建议将不胜感激。

header {
  height: 50px;
  width: 900px;
  color: white;
  margin: auto;
  padding: auto;
  background-color: black;
  display: block;
}

nav {
  float: right;
  background-color: black;
}

p,
h1,
h2,
li {
  font-family: sans-serif;
}

footer {
  height: 50px;
  width: 900px;
  color: white;
  margin: auto;
  background-color: black;
  text-align: center;
  padding: auto;
  display: block;
}

main {
  padding: auto;
  display: block;
}

#container {
  display: block;
  padding-bottom: 50px;
  margin: auto;
  width: 900px;
}

#left-column {
  display: inline-block;
  width: 450px;
  float: left;
}

#right-column {
  display: inline-block;
  float: right;
}

#button {
  border-radius: 5px;
  background-color: red;
  text-align: center;
  color: white;
  height: 50px;
  width: 80px;
}

<div id="container">
  <header>
    <p>Logo</p>
    <nav></nav>
  </header>
  <main>
    <div id="left-column">
      <h1>Website title</h1>
      <h2>Article title</h2>
      <p>Some text followed by a list:</p>
      <ul>
        <li>A list item</li>
        <li>A list item with a link (<a href="#">Click me</a>)</li>
        <li>New deals daily</li>
      </ul>
      <p> Some more text</p>
    </div>
    <div id="right-column">
      <h2>Some content related to the article</h2>
      <div id="button">
        <p>A Button</p>
      </div>
    </div>
  </main>
  <footer>
    <p>&copy;Website name 2017</p>
  </footer>
</div>

Answer 1

通过在CSS中添加clear:both，您需要使用前面的clear the floated elements页脚：

header {
  height: 50px;
  width: 900px;
  color: white;
  margin: auto;
  padding: auto;
  background-color: black;
  display: block;
}

nav {
  float: right;
  background-color: black;
}

p,
h1,
h2,
li {
  font-family: sans-serif;
}

footer {
  height: 50px;
  width: 900px;
  color: white;
  margin: auto;
  background-color: black;
  text-align: center;
  padding: auto;
  display: block;
  clear:both;
}

main {
  padding: auto;
  display: block;
}

#container {
  display: block;
  padding-bottom: 50px;
  margin: auto;
  width: 900px;
}

#left-column {
  display: inline-block;
  width: 450px;
  float: left;
}

#right-column {
  display: inline-block;
  float: right;
}

#button {
  border-radius: 5px;
  background-color: red;
  text-align: center;
  color: white;
  height: 50px;
  width: 80px;
}

<div id="container">
  <header>
    <p>Logo</p>
    <nav></nav>
  </header>
  <main>
    <div id="left-column">
      <h1>Website title</h1>
      <h2>Article title</h2>
      <p>Some text followed by a list:</p>
      <ul>
        <li>A list item</li>
        <li>A list item with a link (<a href="#">Click me</a>)</li>
        <li>New deals daily</li>
      </ul>
      <p> Some more text</p>
    </div>
    <div id="right-column">
      <h2>Some content related to the article</h2>
      <div id="button">
        <p>A Button</p>
      </div>
    </div>
  </main>
  <footer>
    <p>&copy;Website name 2017</p>
  </footer>
</div>

Answer 2

header {
  height: 50px;
  color: white;
  margin: auto;
  padding: auto;
  background-color: black;
  display: block;
}

nav {
  float: right;
  background-color: black;
}

p,
h1,
h2,
li {
  font-family: sans-serif;
}

footer {
  height: 50px;
  color: white;
  margin: auto;
  background-color: black;
  text-align: center;
  padding: auto;
  display: block;

}

main {
  padding: auto;
  display: block;
  overflow:hidden;
}

#container {
  display: block;
  padding-bottom: 50px;
  margin: auto;
  width: 900px;
}

#left-column {
  display: inline-block;
  width: 450px;
  float: left;
}

#right-column {
  display: inline-block;
  float: right;
}

#button {
  border-radius: 5px;
  background-color: red;
  text-align: center;
  color: white;
  height: 50px;
  width: 80px;
}

<div id="container">
  <header>
    <p>Logo</p>
    <nav></nav>
  </header>
  <main>
    <div id="left-column">
      <h1>Website title</h1>
      <h2>Article title</h2>
      <p>Some text followed by a list:</p>
      <ul>
        <li>A list item</li>
        <li>A list item with a link (<a href="#">Click me</a>)</li>
        <li>New deals daily</li>
      </ul>
      <p> Some more text</p>
    </div>
    <div id="right-column">
      <h2>Some content related to the article</h2>
      <div id="button">
        <p>A Button</p>
      </div>
    </div>
  </main>
  <footer>
    <p>&copy;Website name 2017</p>
  </footer>
</div>