css - 使用清除 :both creates a gap under the item

Question

首先，我确实阅读了THIS导致我的问题 THIS问题。这些问题的总体答案是将 overflow: auto; 添加到父级，但这实际上在 Firefox 中创建了一个小滚动条。

我的问题是我的内容中有一个元素需要 float ，但我也有一个 float 侧边栏。因此，当我在内容中的元素上使用 clear: both; 时，它会创建一个空白，一直延伸到侧边栏的末尾。我将发布我的代码，尽管它非常简单:

<div class="post-recipe">

<div class="post-recipe-1"><strong>Time:</strong> <?php the_field('prep_time'); ?></div>

<div class="post-recipe-2"><strong>Servings:</strong> <?php the_field('makes'); ?></div>

<div class="post-recipe-3"><?php the_field('ingredients'); ?></div>

<div class="post-recipe-4"><?php the_field('directions'); ?></div>

</div>

我的 CSS，同样，非常基础

.post-recipe { 
position: relative;
width: 100%;
height: auto;
}

.post-recipe-1 {
float: left;
}

.post-recipe-2 {
float: right;
}

.post-recipe-3 {
clear: both;
}

在我决定回溯并添加这个位之前，我已经构建了设计，它可以正常运行。我实际上正在考虑使用表格来格式化这个位，但在我这样做之前，我想我会问我的在这里提问。同样，我确实在父级中尝试了 overflow: auto;，但它创建了一个滚动条。添加那个 DID 消除了差距，但我不能有那个滚动条。我还尝试将 height: 0; 添加到我的 clearfix，但它什么也没做。有没有其他方法可以使前两个元素 float ，在不产生间隙的情况下清除 float ？

HERE是指向相关页面的链接，如果您查看“准备时间和服务”部分下方，您会看到差距。

Answer 1

看看这是否消除了差距

overflow: hidden; 

应该在没有滚动条的情况下给你同样的效果。