如何解决article与aside盒子重叠footer及等高布局问题？

问题1：Article/Aside与Footer区块重叠 #

根源是.article和.aside使用了float: right，浮动元素会脱离正常文档流，导致Footer无法识别它们的占位空间，从而发生重叠。

解决方法：清除浮动 #

给Footer添加clear: both样式，强制它在所有浮动元素下方渲染：

.footer {
  /* 保留原有样式 */
  clear: both; /* 清除左右两侧的浮动影响 */
}

如果后续页面会有更多浮动元素，推荐使用更健壮的 clearfix 方案：

1. 定义清除浮动的通用类：

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

2. 将Article和Aside放入同一个父容器，并添加该类：

<div class="sidebar-container clearfix">
  <div class="article">...</div>
  <div class="aside">...</div>
</div>

问题2：让Article和Aside保持相同高度 #

传统float布局很难实现自动等高，推荐用Flexbox或Grid布局替代，这两种方案原生支持等高对齐，且代码更简洁。

方案1：Flexbox实现（推荐） #

1. 调整HTML结构，将两个元素放入统一容器：

<div class="sidebar-wrapper">
  <div class="article">
    <article>
      <h1>Article</h1>
    </article>
  </div>
  <div class="aside">
    <aside>
      <h1>Aside</h1>
    </aside>
  </div>
</div>

2. 修改CSS，移除float，改用flex布局：

.sidebar-wrapper {
  display: flex;
  gap: 10px; /* 控制两个盒子的间距，替代margin */
  justify-content: flex-end; /* 保持原有的靠右对齐效果 */
  margin: 5px 0;
}

.article, .aside {
  background-color: lightskyblue;
  border: 3px solid red;
  width: 200px;
  padding: 10px;
  /* 移除固定height和float，让内容自动撑开高度 */
  /* height: 200px; */
  /* float: right; */
}

此时两个盒子会自动保持相同高度，无论内部内容多少。

方案2：Grid布局（更简洁） #

1. 同样将两个元素放入父容器：

<div class="sidebar-grid">
  <div class="article">...</div>
  <div class="aside">...</div>
</div>

2. 用Grid布局实现：

.sidebar-grid {
  display: grid;
  grid-template-columns: 200px 200px;
  gap: 10px;
  justify-content: flex-end;
}

.article, .aside {
  background-color: lightskyblue;
  border: 3px solid red;
  padding: 10px;
}

完整修正代码 #

CSS #

body {
  font-family: 'Times New Roman', Serif;
}

.header {
  background-color: lightskyblue;
  border: 3px solid red;
  height: 200px;
}

.main {
  background-color: lightskyblue;
  border: 3px solid red;
  height: 200px;
  padding: 10px;
  width: 50%;
}

.sidebar-wrapper {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin: 5px 0;
}

.article, .aside {
  background-color: lightskyblue;
  border: 3px solid red;
  width: 200px;
  padding: 10px;
}

.footer {
  background-color: lightskyblue;
  border: 3px solid red;
  height: 200px;
  padding: 10px;
  clear: both;
}

HTML #

<div class="header">
  <h1>Header</h1>
</div>
<br>
<div class="main">
  <main>
    <h1>Main</h1>
  </main>
</div>
<div class="sidebar-wrapper">
  <div class="article">
    <article>
      <h1>Article</h1>
    </article>
  </div>
  <div class="aside">
    <aside>
      <h1>Aside</h1>
    </aside>
  </div>
</div>
<div class="footer">
  <footer>
    <h1>Footer</h1>
  </footer>
</div>

内容的提问来源于stack exchange，提问作者Shahed