如何实现两个右浮动的动态div不相互覆盖？

以下几种CSS方案可以解决这个问题：

方法1：给父容器触发BFC并给子元素设置宽度+间距 #

两个float:right的元素互相覆盖，大多是因为父容器没有包裹住浮动元素，且子元素缺少明确宽度和间距。给父容器触发BFC（块格式化上下文），让它能正确包裹浮动子元素，同时给每个div设置宽度和左侧间距：

/* 父容器样式 */
.container {
  overflow: hidden; /* 触发BFC，简单有效 */
  /* 或者用更现代的 display: flow-root; 不会裁剪溢出内容 */
}

/* 两个div的样式 */
.birthday-div, .news-div {
  float: right;
  width: 45%; /* 用百分比保证自适应，也可以设固定值比如300px */
  margin-left: 2%; /* 给两个元素之间留间距，避免挤在一起 */
}

方法2：用Flexbox替代float（推荐） #

float原本是为文字环绕设计的，现代布局更推荐用Flexbox，代码更简洁，也不会有浮动带来的布局问题：

.container {
  display: flex;
  justify-content: flex-end; /* 让子元素靠右排列 */
  gap: 2%; /* 子元素之间的间距，替代margin */
}

.birthday-div, .news-div {
  width: 45%;
}

这种方式下，即使其中一个div是动态内容，Flexbox也会自动调整布局，不会出现覆盖。

方法3：仅给浮动元素设置明确宽度和间距 #

如果必须保留float:right，至少要给每个元素设置明确的宽度，并通过margin-left隔开：

.birthday-div {
  float: right;
  width: 300px;
  margin-left: 20px; /* 和新闻div拉开距离 */
}

.news-div {
  float: right;
  width: 300px;
}

注意：如果内容长度超过设置的宽度，可能会出现换行或溢出，需要额外加overflow: auto;处理滚动，或者用百分比宽度适配。

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