最近,我正在浏览一些网站的代码,发现每个<div>
都有一个 class clearfix
。
经过快速的 Google 搜索后,我了解到有时是针对 IE6 的,但实际上是一个 clearfix 吗?
与没有 clearfix 的布局相比,您能否提供一些带有 clearfix 的布局的示例?
.clearfix:after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
<div>
<div style="float: left;">Sidebar</div>
<div style="clear: both;"></div> <!-- Clear the float -->
</div>
<div class="clearfix">
<div style="float: left;" class="clearfix">Sidebar</div>
<!-- No Clearing div! -->
</div>
如果您通过可视化学习,此图片可能会帮助您了解clearfix 的作用。
其他答案是正确的。但我想补充一点,这是人们最初学习 CSS 并滥用float
进行所有布局的时间的遗物。 float
旨在在长文本旁边执行诸如 float 图片之类的操作,但是许多人将其用作其主要的布局机制。由于它并不是真正的目的,因此您需要使用 “clearfix” 之类的 hack 程序才能使其正常工作。
这些天display: inline-block
是一种可靠的替代方案( IE6 和 IE7 除外 ),尽管更现代的浏览器以 Flexbox,网格布局等名称提供了更有用的布局机制。
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
%clearfix {
&:before, &:after {
content:" ";
display:table;
}
&:after {
clear:both;
}
& {
*zoom:1;
}
}
#clearfixedelement {
@extend %clearfix;
}
.clearfix:after {
content:"";
display:table;
clear:both;
}
.clearfix {
display: flow-root;
}
.container:before,
.container:after {
content:"";
display:table;
}
.container:after {
clear:both;
}
.container {
zoom:1; /* For IE 6/7 (trigger hasLayout) */
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
zoom: 1
}
实现 clearfix 的另一个(也许是最简单的)选项是使用overflow:hidden;
;。在包含元素上。例如
.parent {
background: red;
overflow: hidden;
}
.segment-a {
float: left;
}
.segment-b {
float: right;
}
<div class="parent">
<div class="segment-a">
Float left
</div>
<div class="segment-b">
Float right
</div>
</div>
当然,这只能在您不希望内容溢出的情况下使用。
// LESS HELPER
.clearfix()
{
&:after, &:before{
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
}
clearfix:after,
clearfix:before {
content: " ";
/* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
.clearfix:after { content: "\00A0"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
.clearfix{ display: inline-block;}
html[xmlns] .clearfix { display: block;}
* html .clearfix{ height: 1%;}
.clearfix {display: block}
.clearfix:after { content: "\00A0"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;width:0;font-size: 0px}.clearfix{ display: inline-block;}html[xmlns] .clearfix { display: block;}* html .clearfix{ height: 1%;}.clearfix {display: block}