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”解决方案。

更新小提琴：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。