技术咨询：aside标签无法与article标签在同一行显示的问题

我在写作业代码时遇到问题：aside 标签没办法和 article 标签处在同一水平行。

预期效果 #

当前代码 #

CSS 代码 #

body {
  background-image: url("stars.jpg");
  font-family: arial;
  color: #ffffff;
  padding: 15px
}

header {
  background-image: url("banner.jpg");
}

nav {
  text-align: center
}

a {
  text-decoration: none;
  color: #ffffff;
  font-size: 14pt;
  border-right: solid;
  border-right-width: 1px
}

a:hover {
  color: #dedede
}

footer {
  text-align: center
}

figcaption {
  text-align: center
}

aside {
  float: right;
  height: 100vh;
  background-color: #6c8cd5;
  width: 20%
}

section {
  background-color: #2a4480
}

article {
  width: 65%
}

HTML 代码 #

<header style="height:250px;">[enter image description here]</header>
<nav style="background-color:#444444">
  <a href="salyut.html">Salyut Program</a>
  <a href="skylab.html">Skylab</a>
  <a href="mir.html">Mir</a>
  <a href="iss.html">International Space Station</a>
</nav>
<section>
  <article>
    <h1>Start of the Space Race</h1>
    <p>Following the fall of Nazi Germany the United States and Soviet Union both sought after a common prize... Wernher von Braun. Von Braun was considered the best in the field of rocket science and was the developer of the V2 rocket. The V2 had a very short range by today's standards, but was the first rocket to reach space. Von Braun surrendered to the United States and agreed to use his knowledge of rocket science to develop the American space program. The Soviet Union was able to acquire much of Von Braun's documentation, and with that they were able to create the first intercontinental missile capable of travelling over 4000 miles from the USSR to Washington DC. Despite Von Braun's expertise in rocket science he was kept out of the rocket development program because of his Nazi affiliation during the war.</p>
    <p>On October 4, 1957 the Soviet Union launched Sputnik which was the first man made satellite to orbit the earth. This was the event that struck fear into the minds of many Americans. It was the first time in history that any location in the United States mainland was vulnerable to attack by the Soviet Union. In response the United States Navy developed and attempted to launch its own satellite called Vanguard which exploded on the launch pad. With this event, the US Government made the decision to bring Von Braun into the space program and 5 weeks later the US launched its first successful satellite called Jupiter C.</p>
    <p>Yuri Gagarin was launched on April 12, 1961 by the Soviet Union making him the first man in space. However on May 5, 1961 Alan Sheppard became first American into space. Americans were tired of coming in second to the Soviet therefore John F. Kennedy declared that the United States would be the first to make it to the Moon and Von Braun's talents were utilized in the development of the Mercury, Gemini, and Apollo programs. On July 20th, 1969 Apollo 11 landed on the moon making Neil Armstrong the first person to set foot on the moon. At this point the United States pulled ahead of the Soviet Union.</p>
    <p>The Soviet's answer to the US Saturn rocket program was the N1 rocket. Unfortunately their first test launch exploded upon its launch ultimately ending the race for the moon for the Soviet Union. Upon reaching the moon, the next goal was orbital outposts, or space stations, was set into motion.</p>
  </article>
  <aside>
    <figure>
      <img src="sputnik1.jpg" style="width:100%">
      <figcaption>Sputnik</figcaption>
      <figure>
        <img src="jupiterC.jpg" style="width:100%">
      </figure>
      <figcaption>Jupiter C</figcaption>
    </figure>
  </aside>
  <footer style="background-color:#6c8cd">
    <p>IE Class</p>
  </footer>
</section>

已尝试的方法 #

• 调整 float CSS 属性的位置
• 使用 position CSS 属性

但问题仍然没有解决，求帮忙！

核心问题出在两点：

1. aside 被放在了 article 后面，float:right 的元素必须放在要并排的元素前面，才能让左侧的 article 自然填充剩余空间，否则 article 会先占满整行，aside 只能被挤到下方。
2. section 容器未处理浮动，导致内部元素溢出，布局混乱。

快速修复步骤 #

1. 调整HTML结构

把 aside 移到 article 前面，让浮动元素先占据右侧位置：

<section>
  <aside>
    <!-- 侧边栏内容 -->
  </aside>
  <article>
    <!-- 正文内容 -->
  </article>
  <!-- footer... -->
</section>

2. 给section添加清除浮动样式

让section能包裹住内部的浮动元素，避免后续footer错位：

section {
  background-color: #2a4480;
  overflow: hidden; /* 最简单的清除浮动方式 */
}

3. 优化宽度和间距（可选）

给 article 加上 float:left，同时调整宽度，留出侧边栏的空间和间距：

article {
  width: 76%;
  float: left;
}

aside {
  float: right;
  height: 100vh;
  background-color: #6c8cd5;
  width: 20%;
  margin-left: 2%; /* 加个间距，避免贴得太近 */
}

更省心的方案：用Flexbox布局 #

如果不想折腾浮动，直接用现代的Flexbox布局，不需要管元素顺序，也不用处理清除浮动：

section {
  background-color: #2a4480;
  display: flex; /* 开启flex布局 */
  gap: 2%; /* 元素之间的间距 */
}

aside {
  height: 100vh;
  background-color: #6c8cd5;
  width: 20%;
}

article {
  width: 78%; /* 剩余宽度 */
}

用这个方案的话，HTML里aside在article前后都没关系，布局自动对齐，稳定性拉满。

内容的提问来源于stack exchange，提问作者Warren O'Byrne