我在我的固定布局中使用了Nicolas Gallagher的micro-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;
}
演示
我做错了什么。 我该如何做到这一点。 有人可以帮我吗
您通常将 clearfix 应用于包含所有浮点数的元素。
但是,在这种情况下,最简单的解决方案是根本不使用 clearfix 来包含浮点数,而是在 footer
上使用 clear: both
:
http://jsfiddle.net/thirtydot/4NJ6v/3/
如果你真的想在这里使用 clearfix,它看起来像这样:
http://jsfiddle.net/thirtydot/4NJ6v/6/
如您所见,必须添加一个额外的包装div
,这不是很好。
将clear:both
添加到页脚 http://jsfiddle.net/4NJ6v/4/或者您可以将float:left
添加到页脚