我有一个古老的问题，一个div包装两列布局。我的侧边栏是浮动的，所以我的容器div不能包装内容和侧边栏。
<div id="container">
<div id="content"></div>
<div id="sidebar"></div>
</div>
似乎有很多方法可以修复Firefox中的明显错误:
< br清楚= "所有" / > 溢出:汽车 隐藏溢出:
在我的情况下，唯一一个似乎正确工作的是<br clear="all"/>解决方案，这有点邋遢。溢出:auto给我讨厌的滚动条，溢出:隐藏肯定有副作用。 此外，IE7显然不应该因为它的错误行为而遭受这个问题，但在我的情况下，它遭受的问题和Firefox一样。
目前可用的哪种方法是最稳健的?
当前回答
我建议使用下面的，这是从http://html5boilerplate.com/
/* >> The Magnificent CLEARFIX << */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
* html .clearfix {
height: 1%;
} /* Hides from IE-mac \*/
.clearfix {
display: block;
}
其他回答
我建议使用下面的，这是从http://html5boilerplate.com/
/* >> The Magnificent CLEARFIX << */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
* html .clearfix {
height: 1%;
} /* Hides from IE-mac \*/
.clearfix {
display: block;
}
使用SASS, clearfix是:
@mixin clearfix {
&:before, &:after {
content: '';
display: table;
}
&:after {
clear: both;
}
*zoom: 1;
}
它的用法如下:
.container {
@include clearfix;
}
如果你想要新的clearfix:
@mixin newclearfix {
&:after {
content:"";
display:table;
clear:both;
}
}
当我们在div元素中使用float属性时，clearfix就可以解决这个问题。如果我们使用两个div元素一个作为float:left;另一个是float:right;我们可以对两个div元素的父元素使用clearfix。如果我们拒绝使用clearfix不必要的空间填充下面的内容和网站结构将被打破。
我已经尝试了所有这些解决方案，当我使用下面的代码时，会自动添加一个大的边距到<html>元素:
.clearfix:after {
visibility: hidden;
display: block;
content: ".";
clear: both;
height: 0;
}
最后，我通过添加font-size: 0来解决边缘问题;到上面的CSS。
与其他clearfix不同，这是一个没有容器的开放式clearfix
其他清除操作要么要求被浮动元素位于标记良好的容器中，要么需要额外的语义上为空的<div>。相反，明确分离内容和标记需要严格的CSS解决方案来解决这个问题。
仅仅因为需要标记浮点数的结尾，就不允许进行无人值守的CSS排版。
如果后者是你的目标，浮点数应该对任何围绕它的东西(段落、有序和无序列表等)保持开放，直到遇到“clearfix”。例如，clearfix可以通过一个新标题来设置。
这就是为什么我使用以下clearfix与新标题:
h1 {
clear: both;
display: inline-block;
width: 100%;
}
这个解决方案在我的网站上被广泛使用，以解决以下问题:浮动的微型对象旁边的文本很短，下一个清除对象的上边距不受尊重。
它还可以防止从站点自动生成pdf时的任何人工干预。 这是一个示例页面。
