微清除修复不起作用答案

【问题标题】：micro clearfix doesn't work微清除修复不起作用
【发布时间】：2013-09-15 01:06:21
【问题描述】：

我在我的固定布局中使用了 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;
}

和微清除修复

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

DEMO

我做错了什么。我如何使这项工作。有人可以帮我吗

【问题讨论】：

标签： html css layout clearfix

【解决方案1】：

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

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

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

如果你真的想在这里使用 clearfix，它看起来像这样：

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

如您所见，必须添加一个额外的包装 div，这不是很好。

【讨论】：

我将 cf 添加到页脚，但它仍然无法正常工作。你能告诉我为什么会这样吗？ jsfiddle.net/4NJ6v/5 我需要学习它:) 我将使用 clear: both on footer.it 更容易谢谢
我刚刚编辑了我的答案，并举例说明了在这种情况下如何使用 clearfix。在您的演示中，您仍然在页脚上有 clearfix，这根本不是您使用它的方式。这可能会有所帮助：stackoverflow.com/questions/8933494/…
就是这样：一个 clearfix 包含浮动元素（并且可以有一个可见的背景，否则它会有一个空高度，因此没有可见的背景），而 .clear { clear: both} 在需要时出现在浮动之后

【解决方案2】：

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

【讨论】：