如何设置浮动组件下方的页脚？

<div class="container">
  <!-- 浮动组件内容 -->
</div>

<footer>
  <!-- 页脚内容 -->
</footer>

.container {
  float: left; /* 或 float: right; */
  width: 50%; /* 设置容器宽度 */
  margin: 10px; /* 设置容器边距 */
  height: 200px; /* 设置容器高度 */
}

footer {
  position: fixed; /* 将页脚固定在页面底部 */
  width: 100%; /* 设置页脚宽度 */
  background-color: #f2f2f2; /* 设置页脚背景颜色 */
  padding: 10px; /* 设置页脚内边距 */
  bottom: 0; /* 将页脚置于页面底部 */
  text-align: center; /* 设置页脚内容居中 */
}

.container::after {
  content: "";
  display: table;
  clear: both; /* 确保页脚出现在容器下方 */
}