css - 无法防止边距崩溃

Question

我不得不让一个悬停的 div 菜单离开它的容器，所以我用 overflow: visible 声明了这个容器并且它可以工作，但是现在那个容器已经失去了它的 margin-bottom 和列表中的以下其余部分.

我读过 this question和 this one ，以及阅读其他几篇文章，并尝试将填充和引用的 html 代码放在不同的元素上，但在我的特定情况下，我无法弄清楚出了什么问题。

网址是http://melopienso.com/testingtwo/shop/每个“ul.products li”都应该有底边距。

有什么想法吗？非常感谢您的帮助!

Answer 1

问题是你想要 margin-bottom 的元素是 float 的。因此，他们不会延长 parent 的高度。因此，如果您在父元素上应用边距，它将位于 float 元素的“下方”。

对您的案例的解释:

在您的示例中，li.product 有 2 个 child :a 和 gk-columns。 .gk-columns 只有 float 子元素，所以它的高度为 0，因为 float 元素不会扩展父元素的高度。因此 li.product 的高度仅由 a 标签扩展，即 28px。

因此，如果您在 li.product 上应用 margin-bottom:50px;，它将仅推送

的内容

28px + 50px = 78px

小于 float div 的高度。

您可以通过多种解决方案解决此问题:

解决方案 1在您的示例中像这样在 float 元素上添加 margin-bottom :

.gk-columns>div{
    margin-bottom:50px;
}

解决方案 2如果子元素的高度是固定的，则将高度设置为父元素，以便它覆盖 float 子元素的高度，例如:

.gk-columns{
    height:159px;
}