html - clearfix 父级上的额外空间

Question

我有一个布局，其中边栏是固定的，主要内容容器是流动的。

        <div id="contents" class="wrapper group">
            <aside id="sidebar">
                <!-- sidebar stuff here -->
            </aside>
            <section id="main-contents">
                <!-- content here -->
            </section>
        </div>

http://jsfiddle.net/QzsL5/2/

当我将类“组”应用到提要的 ul 时，ul 的高度添加了额外的像素，它不仅包裹了 >li 在里面。但是当我删除侧边栏时，不会显示这个额外的高度。我注意到 ul 的底部与侧边栏的底部对齐。

我不知道为什么会这样。我们将不胜感激。

谢谢你:)

Answer 1

我认为您可能缺少的是您的 CSS 中的“clearfix”解决方案。

更新 fiddle :http://jsfiddle.net/QzsL5/4/

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

在您的 css 中实现上述内容后，将以下类名“clearfix”添加到您的 UL。