Jquery选项卡式导航导致下面的元素出现浮动问题

Question

我一直在努力弄清楚为什么Facebook评论框在选项卡式导航的标签下浮动如此之高。我已经尝试了浮动元素的clearfix的多种变体无济于事，我已经想通了如果你删除了jquery元素它工作得很好......但是我无法指出答案

这是一个有用的链接

http://smooth-media.co.uk/clients/4598185/

非常感谢提前

Answer 1

我会尝试将clear:all添加到#tabs div：

#tabs
{
    clear: both;
    height: 28px;
    background-color: #000;
    border-bottom: 1px solid #fff;
}

或者您可以尝试将其添加到fb-comments类：

div.fb-comments {
    clear: both !important;
}

Answer 2

由于您为页面设置样式的方式，您已向标签容器添加了一个高度，但内部仍有内容，因此这会导致重叠错误，因为内容大于高度集。

要快速修复，只需在#tabs容器中添加margin-bottom，它会将facebook评论移动下来：

#tabs {
    height: 28px;
    background-color: black;
    border-bottom: 1px solid white;
    margin-bottom: 100px;
}

修改

再看一下你的代码后，你真正应该做的是将高度和背景颜色添加到列表而不是div #tabs

类似这样的事情

#tabs ul {
    height: 28px;
    background-color: black;
}

然后你的#tabs应该是这样的

#tabs{
    height: 150px; //Whatever size the whole section should be
}