在CSS中的两个元素之间重叠

Question

我是CSS新手所以请耐心等待。我有一个位于右侧的小部件，我创建了一个RSS提要和一个读取这些提要的阅读器，现在每个提要都用div封装，其中class = rss 现在的问题是div在widget下是可见的。我希望停止在小部件的边框上，如果没有小部件全宽，我怎么能实现呢......这是一张图片来展示这种情况：

这是我的.rss代码：

.rss {
background: #afb1b8;
border:1px dashed #ccc;
padding:5px;
}

这里是小部件代码：

.widget {
     margin-bottom:20px;
}
.widget h2 {
     margin:0 0 10px 0;
     padding:0 5px;
     font-weight:normal;
     border-bottom:1px solid #ddd;
}
.widget .inner {
     margin:0 10px;
}

请使用代码支持您的答案，如果不是太多，请向我解释。感谢您的时间和考虑

Answer 1

如果我理解得很好，你不希望小部件下的.rss div的任何部分（蓝灰色的化身）？

然后将overflow: hidden添加到您的第一条规则中。我猜这个小部件的位置是float: right？然后.rss将与浮动一起玩得很好。你可以用overflow: hidden替换display: table：两者都会给div一个block formatting context（这是CSS中一个非常高级的主题，很抱歉这里没有进一步的解释）。

.rss {
  overflow: hidden;
  background: #afb1b8;
  border:1px dashed #ccc;
  padding:5px;
}

请注意，overflow: hidden如果您有下拉列表或任何必须显示其元素创建的区域之外的任何内容，将无法正常工作：不会显示任何内容（这对于初学者来说不是一个很好的理由一般使用overflow: hidden