Question

我在我的固定布局中使用nicolas gallagher的micro-clearfix。在我的布局中，绿色的页脚不会出现。这意味着clearfix无法正常工作

<div class="container">
    <aside class="al">
    </aside>
    <section class="content">

    </section>
    <aside class="ar">
    </aside>
    <footer class="cf">
    </footer>
</div>

CSS

.container {
    width: 500px;
    height: 400px;
    margin: 0 auto;
}
.al {
    background: red;
    width: 100px;
    height: 100px;
    float: left;
}
.content {
    float: left;
    width: 300px;
    height: 100px;
    background: black;
}
.ar {
    background: red;
    width: 100px;
    height: 100px;
    float: left;
}
footer {
    background: blue;
    width: 100%;
    height: 100px;
    background: green;
}

和micro clearfix

.cf:after, .cf:before {
    content: " ";
    display: table; 
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}

DEMO

我做错了什么。我该如何做这项工作。请有人帮帮我

Answer 1

您通常将clearfix应用于包含所有浮点数的元素。

但是，在这种情况下，最简单的解决方案是根本不使用clearfix来包含浮点数，而是在clear: both上使用footer：

http://jsfiddle.net/thirtydot/4NJ6v/3/

如果您真的想在这里使用clearfix，它将如下所示：

http://jsfiddle.net/thirtydot/4NJ6v/6/

正如您所看到的，必须添加一个额外的包裹div，这不是很好。

Answer 2

将clear:both添加到页脚http://jsfiddle.net/4NJ6v/4/，或者您可以将float:left添加到页脚

micro clearfix不起作用

2 个答案: