Jquery 选项卡式导航导致以下元素出现浮动问题答案

【问题标题】：Jquery tabbed navigation causing floating issues with elements belowJquery 选项卡式导航导致以下元素出现浮动问题
【发布时间】：2012-04-14 05:59:28
【问题描述】：

我一直非常头疼，试图弄清楚为什么 facebook cmets 框在选项卡式导航的选项卡下浮动得如此之高。我已经尝试了浮动元素的 clearfix 的多种变体但无济于事，我发现如果你删除 jquery 元素它工作正常......但我无法确定答案

这是一个有效的链接

在此先感谢

【问题讨论】：

【解决方案1】：

由于您设置页面样式的方式，您已向选项卡容器添加了高度，但其中仍有内容，因此这会导致重叠错误，因为内容大于高度集。

为了快速修复，只需将 margin-bottom 添加到#tabs 容器中，它将向下移动 facebook cmets：

#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
}

【讨论】：

【解决方案2】：

我会尝试将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;
}

【讨论】：