html - 我应该使用 <aside> 标签吗？如果是这样，我该如何正确放置它？

Question

<分区>

Answer 1

您似乎正确使用了 aside 标签，但这并不是真正的问题所在。

您看到的重叠是由于向左浮动造成的。 float 元素会将其从正常文档流中移除。

与其使用 float: left;，不如尝试使用 display: inline-block;

Working Example

body {
  background-color: white;
  font-family: Georgia, Times, serif;
  padding: 0;
  margin: 0;
}
img.banner {
  display: block;
  margin: 0px auto;
}
img.title {
  width: 90%;
  display: block;
  margin: 0px auto;
}
figcaption {
  font-size: 150%;
  text-align: center;
}
header {
  width: 70%;
  margin: 10px;
  padding: 10px;
  margin-left: 15%;
  font-size: 200%;
  text-align: center;
  border: 3px solid #000000;
}
nav {
  background-color: blue;
  height: 30px;
  margin: 10px;
  padding: 10px;
}
.content {
  background-color: gray;
  width: 70%;
  padding: 10px;
  display: inline-block;
}
article {
  border: 3px solid #000000;
  margin: 10px;
}
aside {
  border: 3px solid #000000;
  height: 300px;
  width: 12%;
  padding: 0px 10px 0px 10px;
  display: inline-block;
  vertical-align: top;
}
footer {
  border: 3px solid #000000;
  width: 70%;
  margin-left: 15%;
  padding: 10px;
  height: 100px;
}

<div id="page">
  <img src="http://placekitten.com/g/200/200" class="banner" alt="Banner" />
  <header>
    <p>Tom and Suzy's Wedding</p>
  </header>
  <aside>
  </aside>
  <div class="content">
    <figure>
      <article>
        <img src="http://placekitten.com/g/400/500" class="title" alt="Kitten" />
        <figcaption>August 1, 2015</figcaption>
      </article>
    </figure>
  </div>
  <footer>
  </footer>
</div>