我不得不让一个悬停的div菜单离开它的容器，所以我声明那个容器有溢出：可见并且它可以工作，但是现在该容器已经丢失了它的margin-bottom与列表中的其余部分
我已阅读this question和this one，以及阅读其他几篇文章，并尝试将paddings和html代码引用到不同的元素上，但我无法得到什么是在我的具体案例中出错。
网址为http://melopienso.com/testingtwo/shop/，每个“ul.products li”应该有下边距。
有什么想法吗？非常感谢你的帮助！
答案 0 :(得分：1)
问题是您希望margin-bottom开启的元素是浮动的。因此，他们不会延长父母的身高。因此，如果您使用父项的边距，它将在“浮动元素”下面。
您的案例说明：
在您的示例li.product中有2个孩子：a和gk-columns。 .gk-columns只浮动子项，因此其高度为0，因为浮动元素不会延伸父项的高度。因此，li.product的高度仅由a标记扩展，即28px。
因此，如果您在margin-bottom:50px;上li.product，则会仅推送内容
28px + 50px = 78px
小于浮动div的高度。
您可以通过以下几种解决方案解决此问题：
解决方案1
像你这样的例子，在浮动元素上添加margin-bottom：
.gk-columns>div{
margin-bottom:50px;
}
解决方案2 如果子元素的高度是固定的，则将高度设置为父元素，以便它覆盖浮动子元素的高度，例如：
.gk-columns{
height:159px;
}