CSS：Div 框相互重叠并隐藏文本。如何“清除”它们？答案

【问题标题】：CSS: Div boxes overlap each other and hide text. How to "clear" them?CSS：Div 框相互重叠并隐藏文本。如何“清除”它们？
【发布时间】：2020-07-08 15:21:37
【问题描述】：

我的 div 框有一个小问题，我似乎无法解决。

我正在动态创建这些 div 框：

<div id="pagelist">
<div class="pagelist_img"><img src="images/default.gif"></div>
<div class="pagelist_h1">HEADLINE</a></div>
div class="pagelist_excerpt">SUMMARY</div>
</div>

每个 div 框都由顶部的图片、标题和帖子的简短摘要组成。现在，我的问题是这些框相互重叠，但刚好足以使摘要部分隐藏在其下方 div 框的图像下方。

好的，这可能有点令人困惑，但重点是，不知何故，这些盒子没有分开，而是相互重叠。

我的页面列表 div 框的 CSS 是：

#pagelist{
    float: left;
    width: 280px;
    margin: 0 40px 20px 0;
    position: relative;
    height: 100px;

}

.pagelist_h1 {
    font-size: 1.8em;
    font-weight: bold;
}

.pagelist_img{
    clear:both;
    top: 0px;
    position: relative;
}

.pagelist_excerpt, .pagelist_excerpt p {
    font-size: 1em;
    color: #000000;
    clear:both;
}

我希望有人有解决方案或可以为我指明正确的方向，因为我已经尝试了一段时间自己解决它，但没有任何运气。我虽然只是使用 clear:both 标签的问题，但它没有做任何事情。

真诚
- 梅斯蒂卡

【问题讨论】：

嘿 Mestika 检查你的标记.. 有点乱 ;)
是的，删除</a> 并在第4 个开头<div> 标签的开头添加<
图片高度是多少？我猜您超出了您在页面列表中设置的高度。
嘿 jswolf，很难不让自己受伤，因为这正是它的问题所在 - 不知道我在想什么。感谢其他所有人的帮助以及关于 clearfix 的精彩提示：之后，我相信这会在以后帮助我。
很高兴为您解决了 ^_^

标签： html css

【解决方案1】：

尝试删除定位并清除，因为默认<div>s 是块级别，应该在另一个下显示一个。

Made an example with your code.

【讨论】：

【解决方案2】：

使用清除修复。大致如下：

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {
    zoom: 1;     /* triggers hasLayout */
}

并将您的标记修改为

<div id="pagelist" class="clearfix">

http://www.positioniseverything.net/easyclearing.html

另外，看看骗子：

【讨论】：