最近我在浏览一些网站的代码，看到每个<div>都有一个类clearfix。
在快速谷歌搜索后，我了解到它是IE6有时，但实际上什么是一个clearfix?
你能提供一些例子的布局与一个clearfix，比较没有一个布局clearfix?
当前回答
我尝试了接受的答案，但我仍然有一个问题的内容对齐。添加如下所示的“:before”选择器修复了这个问题:
// LESS HELPER
.clearfix()
{
&:after, &:before{
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
}
上面的LESS将编译为下面的CSS:
clearfix:after,
clearfix:before {
content: " ";
/* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
其他回答
这是一个不同的方法，同样的东西，但有点不同
区别在于内容点被替换为\00A0 ==空格
更多信息http://www.jqui.net/tips-tricks/css-clearfix/
.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}
实现clearfix的另一个(也许是最简单的)选项是使用overflow:hidden;在包含元素上。例如
.parent { 背景:红色; 溢出:隐藏; ｝ .segment-a { 浮:左; ｝ .segment-b { 浮:正确; ｝ < div class = "父" > < div class = "分割一个" > 左浮动 < / div > < div class = "段b”> 浮动对吧 < / div > < / div >
当然，这只能在您不希望内容溢出的情况下使用。
其他答案都是正确的。但我想补充的是，当人们第一次学习CSS时，它是一个时代的遗迹，滥用float来做所有的布局。Float是用来在长文本旁边放置浮动图像的，但很多人把它作为主要的布局机制。因为这并不是真正的目的，你需要像“clearfix”这样的技巧来让它工作。
如今，display: inline-block是一个可靠的选择(除了IE6和IE7)，尽管更多的现代浏览器正在推出更有用的布局机制，如flexbox, grid layout等。
简单地说，clearfix是一种hack。
这是我们不得不忍受的丑陋事情之一，因为这是确保浮动子元素不会溢出它们的父元素的唯一合理方法。还有其他的布局方案，但浮动在今天的网页设计/开发中太常见了，不能忽视clearfix hack的价值。
我个人倾向于Micro Clearfix解决方案(Nicolas Gallagher)
.container:before,
.container:after {
content:"";
display:table;
}
.container:after {
clear:both;
}
.container {
zoom:1; /* For IE 6/7 (trigger hasLayout) */
}
参考
我尝试了接受的答案，但我仍然有一个问题的内容对齐。添加如下所示的“:before”选择器修复了这个问题:
// LESS HELPER
.clearfix()
{
&:after, &:before{
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
}
上面的LESS将编译为下面的CSS:
clearfix:after,
clearfix:before {
content: " ";
/* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
